台州网站平面设计,做网站哪些方面会侵权,html5 wordpress,网站设计制作推荐之前使用 html2canvas 和 jsPDF 实现html转pdf#xff0c;但是客户说不能复制pdf中的文字#xff0c;要改一下#xff0c;先说不能复制的方法#xff0c;再说可以复制的方法 一#xff0c;html2canvas 和 jsPDF#xff08;图片插入pdf不可复制#xff09; 创建pdf.js文…  之前使用 html2canvas 和 jsPDF 实现html转pdf但是客户说不能复制pdf中的文字要改一下先说不能复制的方法再说可以复制的方法 一html2canvas 和 jsPDF图片插入pdf不可复制 创建pdf.js文件代码如下 import html2canvas from html2canvas import jsPDF from jspdf import Vue from vue export const downloadPDF (page, ne, isDownload) {html2canvas(page, {allowTaint: true,taintTest: false,useCORS: true,// width:960,// height:5072,dpi: window.devicePixelRatio * 8, // 将分辨率提高到特定的DPI 提高四倍scale: 10 // 按比例增加分辨率}).then(function(canvas) {canvas2PDF(canvas, ne, isDownload)}) } const canvas2PDF (canvas, ne, isDownload) {var contentWidth canvas.widthvar 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.28var imgHeight (592.28 / contentWidth) * contentHeightvar pageData canvas.toDataURL(image/jpeg, 1.0)var 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();}}}console.log(PDF, PDF)if (isDownload) {PDF.save(ne .pdf) // 这里是导出的文件名} else {var pdfData PDF.output(datauristring)Vue.prototype.$baseURL pdfData// sessionStorage.setItem(base64URL,pdfData);console.log(1)} }使用 div classpdfdiv refpdf classpage你好/div/div//引入 import { downloadPDF, canvas2PDF } from ../../utils/pdf // 工具方法导出操作handleExport() { var zhis thisvar dsq setTimeout(() {downloadPDF(this.$refs.pdf, CUKH Tax Invoice - ${this.form.invoiceNo}, true)}, 100) } 一window.print();方法打印可复制 1安装 npm install vue-print-nb --save 2手动下载插件到本地  插件地址https://github.com/xyl66/vuePlugs_printjs 在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下 printjs代码 //print.js 里的代码 // 打印类属性、方法定义 /* eslint-disable */ const Print function(dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options this.extend({noPrint: .no-print}, options);if ((typeof dom) string) {this.dom document.querySelector(dom);} else {this.dom dom;}this.init();};Print.prototype {init: function () {var content this.getStyle() this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] obj2[k];}return obj;},getStyle: function () {var str ,styles document.querySelectorAll(style,link);for (var i 0; i styles.length; i) {str styles[i].outerHTML;}str style (this.options.noPrint ? this.options.noPrint : .no-print) {display:none;}/style;return str;},getHtml: function () {var inputs document.querySelectorAll(input);var textareas document.querySelectorAll(textarea);var selects document.querySelectorAll(select);for (var k in inputs) {if (inputs[k].type checkbox || inputs[k].type radio) {if (inputs[k].checked true) {inputs[k].setAttribute(checked, checked)} else {inputs[k].removeAttribute(checked)}} else if (inputs[k].type text) {inputs[k].setAttribute(value, inputs[k].value)}}for (var k2 in textareas) {if (textareas[k2].type textarea) {textareas[k2].innerHTML textareas[k2].value}}for (var k3 in selects) {if (selects[k3].type select-one) {var child selects[k3].children;for (var i in child) {if (child[i].tagName OPTION) {if (child[i].selected true) {child[i].setAttribute(selected, selected)} else {child[i].removeAttribute(selected)}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe document.createElement(iframe),f document.body.appendChild(iframe);iframe.id myIframe;iframe.style position:absolute;width:0;height:0;top:-10px;left:-10px;;w f.contentWindow || f.contentDocument;doc f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand(print, false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log(err, err);}}};const MyPlugin {}MyPlugin.install function (Vue, options) {Vue.prototype.$print Print}export default MyPlugin main.js里引入 import Print from ./plugs/print Vue.use(Print) 使用 div classpdfdiv refpdf classpage你好/div/divhandleExport() {setTimeout(() {this.$print(this.$refs.pdf)}, 100);}, 修改打印样式 样式可能会有偏差或者位移可以添加样式去修改 media print {page {margin: 0 !important;}.pdf{position: fixed;top: -265px !important;left: -150px !important;transform: translate(-50%, -50%);transform: scale(0.7);box-shadow:none !important;}} 可能遇到的问题及解决方案 ①图片占位置 ---------让它脱离文档流 position: absolute; 不要用fixed 这样内容多的时候只打印第一页 ②页面不想展示打印内容 只打印------- 给它 z-index-1 displaynone 的话打印内容也没有 ③ 指定不打印区域 方法1. 添加no-print样式类 方法2. 自定义类名 this.print( this.print(this.print(this.refs.print,{‘no-print’:‘.do-not-print-me-xxx’})