html2canvas文檔地址
http://html2canvas.hertzen.com/configuration
方式一：使用html2canvas和jspdf插件實現
該方式是通過html2canvas將HTML頁面轉換成圖片，然后再通過jspdf將圖片的base64生成為pdf文件。實現步驟如下：
1,下載插件模塊
npm install html2canvas jspdf --save
2,定義功能實現方法
在項目工具方法存放文件夾utils中創建htmlToPdf.js文件，代碼如下：
// 導出頁面為PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(title + '.pdf') } ) } } }
3, 全局引入實現方法
import htmlToPdf from '@/components/utils/htmlToPdf' // 使用Vue.use()方法就會調用工具方法中的install方法 Vue.use(htmlToPdf)
4, 在相關要導出的頁面中，點擊時調用綁定在Vue原型上的getPdf方法，傳入id即可
/html
<div id="pdfDom">
<!-- 要下載的HTML頁面,頁面是由后台返回 -->
<div v-html="pageData"></div>
</div>
<div class="text-center">
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">點擊下載</el-button>
</div>
這里模擬一個頁面在sript標簽中寫
const html1=`<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是需要pdf導出的頁面</title>
</head>
<style>
.lala{
width:300px;
height:300px;
background:pink;
color:red;
font-size:60px;
}
</style>
<body>
<div class="lala">我是有顏色的div</div>
</body>
</html>`
data
data(){ return { htmlTitle: '頁面導出PDF文件名', pageData:html1 } },
當然，如果是導出當前頁面，就不用這么麻煩了，把最外成元素的id寫成pdfDom就可以了
以上就是前端簡單導出pdf
文章來源：
https://www.jianshu.com/p/56680ce1cc97
當然：為了減少，項目體積html2canvas.js可以用bootcdn引入，
首先在html頁面用script標簽引入html2canvas.js，在config.js中設置
externals: { 'html2canvas':'html2canvas' }
這樣就可以通過import在自己的js內引入html2canvas.js了，例如下面
import html2Canvas from 'html2canvas'
不過，用這種方式引入jspdf.js卻沒成功，或許是不知道jspdf.js全局變量，知道的大神可以留言
測試了下代碼，bug來了！！！
當我把需要轉化成cavas的html內容高度寫的老高時，發現上述代碼只生成了視口之內的內容，視口之外的內容沒有生成到cavas上，調了老半天，在網上查了個方法試試，
就是，將要轉化cavas的元素，用jquery的克隆方法克隆一份，然后添加到body內，再讓html2canvas.js去按照這個克隆的元素，去生成cavas，然后就可以生成完整了，pdf保存之后，再將這個克隆的元素刪除，修稿后的代碼如下：
htmlToPdf.js：
// 導出頁面為PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title = this.htmlTitle; var targetDom = $("#pdfDom"); let copyDom = targetDom.clone(); $('body').append(copyDom); html2Canvas(copyDom, { allowTaint: true, }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(title + '.pdf'); copyDom.remove(); } ) } } }
哦了，但是有一點，我點擊生成的時候，頁面會閃出來一下那個克隆的元素，又消失，感覺不大好，繼續解決