东莞网站建设设计公司哪家好,discuz是什么,谷歌网站统计,优秀的手机网站案例分析将Vue单页面转成pdf并下载
步骤1#xff1a;下载对应的库
npm install html2canvas;npm install jspdf --save
步骤2#xff1a;创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下#xff0c;编写如下代码#xff1a;
// htmlToPdf.js
// 导出页面为PDF格式
…将Vue单页面转成pdf并下载
步骤1下载对应的库
npm install html2canvas;npm install jspdf --save
步骤2创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下编写如下代码
// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from html2canvas
import JsPDF from jspdf
export default {install(Vue, options) {Vue.prototype.getPdf function () {var title this.htmlTitle //DPF标题html2Canvas(document.querySelector(#pdfDom), {allowTaint: true,taintTest: false,useCORS: true,y:72, // 对Y轴进行裁切// width:1200,// height:5000,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4 //按比例增加分辨率 }).then(function (canvas) {let contentWidth canvas.widthlet contentHeight canvas.heightlet pageHeight contentWidth / 592.28 * 841.89let leftHeight contentHeightlet position 0let imgWidth 595.28let imgHeight 592.28 / contentWidth * contentHeightlet 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 - pageHeightposition - 841.89if (leftHeight 0) {PDF.addPage()}}}PDF.save(title .pdf)})}}
}
// main.js
import htmlToPdf from /util/htmlToPdf
Vue.use(htmlToPdf)
步骤三在vue页面中给需要打印的区域一个div标签然后给div一个idid名和htmlToPdf.js中选择的名字一致代码如下
div idpdfDom... 将要打印的内容放入其中
/div
步骤四在data节点中声明一个htmlTitle变量指定为pdf文件的文件名
data() {return {htmlTitle: 要生成pdf的文件名}
}
步骤五在vue页面中添加一个button按钮事件名和htmlToPdf.js中的方法名保持一致。
el-button clickgetPdf()PDF/el-button
欧克了完成以上步骤就可以实现div中内容的转为pdf并下载文件
