江苏省住房和建设部网站详情页设计思路怎么写

当前位置： 首页 > news >正文

江苏省住房和建设部网站,详情页设计思路怎么写,建材板材网站源码 asp,曲靖今天最新通知提示#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的名称 ……
2. 打印内容 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必须一致
   三、打印预览
3. 引入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文件是两码事