江苏省住房和建设部网站,漳州博大网站建设,企业网站建设之域名篇,标签系统做的好的网站提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、安装html2canvas和jspdf二、导出pdf使用步骤1.在utils文件夹下创建htmlToPdf.js2.在main.js中引入3.在页面中使用三、打印预览1. 引入print-js2.页面中impor… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录前言一、安装html2canvas和jspdf二、导出pdf使用步骤1.在utils文件夹下创建htmlToPdf.js2.在main.js中引入3.在页面中使用三、打印预览1. 引入print-js2.页面中import3. 点击方法总结弹出打印框的另一种方式前言
提示这里可以添加本文要记录的大概内容
打印页面中显示的部分内容由div包括的所有内容都将被导出为pdf文件 提示以下是本篇文章正文内容下面案例可供参考
一、安装html2canvas和jspdf
npm install --save html2canvas;
npm install --save jspdf二、导出pdf使用步骤
1.在utils文件夹下创建htmlToPdf.js 代码如下示例
// htmlToPdf.js
// 导出页面为PDF格式
/* 用法
1. main.js中引入
import htmlToPdf from /util/htmlToPdf
Vue.use(htmlToPdf)2. vue页面中调用
按钮中方法 clickgetPdf()
data中声明变量
data() {return {htmlTitle: 测试导出文件, // 生成pdf的名称 ......
3. 打印内容 id必须为pdfDom
div idpdfDom */
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,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)})}}
}
2.在main.js中引入
代码如下示例
import htmlToPdf from ./utils/htmlToPdf.js
Vue.use(htmlToPdf)3.在页面中使用
页面内容代码
!-- 页面主要内容打印部分内容 start --
div idpdfDom classtableBox refprinth12023年3月10日11:40:12/h1el-table :datatableData border stripe stylewidth: 600pxel-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-tablep测试结束/p
/div
div classonBtnel-button typeprimary clickgetPdf()导出文件/el-buttonel-button typesuccess clickgoPrint()查看打印效果/el-button
/divcss样式
.tableBox {margin: 0 auto;width: 750px;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 20px;border: 1px solid #3399cc;h1 {text-align: center;}.el-table {margin: 20px 0;}
}
.onBtn{margin: 30px auto;display: flex;align-items: center;justify-content: center;
}js变量
htmlTitle: 测试导出文件, // 生成pdf的名称
tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄
}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄
}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄
}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄
}]getPdf方法为htmlToPdf.js中创建的并且已经在main.js中引用为全局 data变量里面必须自定义一个title名称要与js中相对应。 导出内容div里面必须定义id必须一致
三、打印预览
1. 引入print-js
npm install --save print-js2.页面中import
import printJS from print-js
import html2Canvas from html2canvas3. 点击方法
首先要在打印内容中加一个ref绑定
goPrint() {this.isPrint truehtml2Canvas(this.$refs.print, {allowTaint: true,taintTest: false,useCORS: true,dpi: window.devicePixelRatio * 4,scale: 4}).then((canvas) {const url canvas.toDataURL()printJS({printable: url, // 要打印的idtype: image,style: page{size:auto;margin: 0cm 1cm 0cm 1cm;} //去除页眉页脚})this.isPrint false})
}总结
完整页面代码
!-- 导出文件测试 --
templatediv classcontainer!-- 页面主要内容打印部分内容 start --div idpdfDom classtableBox refprinth12023年3月10日11:40:12/h1el-table :datatableData border stripe stylewidth: 600pxel-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-tablep测试结束/p/divdiv classonBtnel-button typeprimary clickgetPdf()导出文件/el-buttonel-button typesuccess clickgoPrint()查看打印效果/el-button/div/div!-- 页面主要内容打印部分内容 end --/div
/templatescriptimport printJS from print-jsimport html2Canvas from html2canvasexport default {name: exportPDF,data() {return {htmlTitle: 测试导出文件, // 生成pdf的名称 tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}},created() {},methods: {goPrint() {this.isPrint truehtml2Canvas(this.$refs.print, {allowTaint: true,taintTest: false,useCORS: true,dpi: window.devicePixelRatio * 4,scale: 4}).then((canvas) {const url canvas.toDataURL()printJS({printable: url, // 要打印的idtype: image,style: page{size:auto;margin: 0cm 1cm 0cm 1cm;} //去除页眉页脚})this.isPrint false})}},}
/scriptstyle scoped langless.container {.tableBox {margin: 0 auto;width: 750px;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 20px;border: 1px solid #3399cc;h1 {text-align: center;}.el-table {margin: 20px 0;}}.onBtn {margin: 30px auto;display: flex;align-items: center;justify-content: center;}}
/style
弹出打印框的另一种方式
下载安装
npm install --save vue-print-nbmain.js引入
// vue打印插件 vue-print-nb
import Print from vue-print-nb
Vue.use(Print)用法 效果就是弹出浏览器自带的打印与导出pdf文件是两码事
