1、我們要添加兩個模塊
第一個.將頁面html轉換成圖片
npm install --save html2canvas?
第二個.將圖片生成pdf
npm install jspdf --save
2、定義全局函數(shù)..創(chuàng)建一個htmlToPdf.js文件在指定位置.我個人習慣放在('src/utils/htmlToPdf')
// 導出頁面為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、在main.js中使用我們定義的函數(shù)文件。
import htmlToPdffrom'@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)
4、在需要的導出的頁面..調用我們的getPdf方法即可.
<divclass="row"id="pdfDom"style="padding-top: 55px;background-color:#fff;">
//給自己需要導出的ui部分.定義id為"pdfDom".此部分將就是pdf顯示的部分
</div>
<button type="button"class="btn btn-primary"v-on:click="getPdf()">導出PDF>
export default {
? data () {
? ? ? return {
? ? ? htmlTitle: '頁面導出PDF文件名'
? ? ? }
? }
}
到這里大家會發(fā)現(xiàn)功能是可以實現(xiàn)了，但是會有個致命的問題，導出來的pdf打印出來還是比較模糊的，那么，針對這個問題，我們要怎么解決呢？
我們的思路是：將canvas的屬性width和height屬性放大為2倍，最后將canvas的css樣式width和height設置為原來1倍的大小即可，也就是，先將canvas高分辨率輸出，再來壓縮導出打印，即可，廢話不多說，完整代碼如下：
// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
? install (Vue, options) {
? ? Vue.prototype.getPdf = function (dom,title) {
? ? ? var title = title
? ? ? var c = document.createElement("canvas")
? ? ? var opts = {
? ? ? ? scale: 2,
? ? ? ? canvas: c,
? ? ? ? logging: true,
? ? ? ? width: document.querySelector(dom).width,
? ? ? ? height: document.querySelector(dom).height
? ? ? };
? ? ? c.width = document.querySelector(dom).width * 2
? ? ? c.height = document.querySelector(dom).height * 2
? ? ? c.getContext("2d").scale(2, 2);
? ? ? html2Canvas(document.querySelector(dom), opts).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')
? ? ? }
? ? ? )
? ? }
? }
}
