今天开始实现日结单这个功能，日结单是容许打印的，因此咱们须要将日结单以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>