今天開始實現日結單這個功能，日結單是容許打印的，因此咱們須要將日結單以PDF的形式導出，我作的是Vue單頁應用，因而查找了一番Vue如何導出PDF，看了幾篇博客，實現了PDF的導出。
不廢話了，先看一下最終的打印結果
我醜話說在前面，最終打印出來的pdf文件就是這個樣子，經過對jspdf的設置實現了pdf文件的分頁，但文件的內容我暫時沒有能力進行分頁。由於咱們是先將咱們須要進行打印的元素（好比id="pdfDom"的div）轉換成canvas，canvas轉換成圖片，再將圖片放入pdf文件中。若是咱們須要對內容進行分頁，那咱們就要獲取div中所有元素的高度，而後進行判斷等一系列操做.......html
太麻煩了，這個日結單的內容確定是動態的，並且沒法保證裏面有多少個元素，因此到了這一步我就放棄了，若是哪位同好有解決方案，歡迎在評論區給我留言。npm
1、首先添加兩個模塊：
cnpm install html2canvas --save cnpm install jspdf --save
2、定義全局函數..建立一個htmlToPdf.js文件在指定位置，好比你能夠放在('@/components/utils/htmlToPdf')，該文件內容以下canvas
// 導出頁面爲PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.getPdf = function(title) { var element = document.querySelector('#pdfDom'); // 這個dom元素是要導出pdf的div容器 setTimeout(() => { html2Canvas(element).then(function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一頁pdf顯示html頁面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html頁面高度 var leftHeight = contentHeight; //頁面偏移 var position = 0; //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高 var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new JsPDF('', 'pt', 'a4'); //有兩個高度須要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89) //當內容未超過pdf一頁顯示的範圍，無需分頁 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'); }); }, 0); } } }
3、在main.js文件中引用咱們定義的全局函數dom
import htmlToPdf from '@/components/utils/htmlToPdf' Vue.use(htmlToPdf)
4、在組件中使用便可jsp
<template> <div> <div id="pdfDom"> 須要生成pdf的內容 </div> <el-button type="danger" @click="toGetPdf">導出PDF</el-button> </div> </template> <script> export default { data() { return { title: '' } }, methods: {
toGetPdf() {
/* 這行代碼很重要，它讓頁面的滾動條跳到了最上方
若是點擊打印按鈕的時候,滾動條沒有在最上方,打印內容會是不完整的
固然,用起來體驗也會差一點,若是你有更好的辦法,
歡迎來評論區,咱們一塊兒探討*/
window.scrollTo(0, 0);
this.getPdf(this.title);
}函數
} } </script> <style> </style>