vue html转pdf并打印

2021-09-18 15:33:36 阅读：375 来源： 互联网

标签：并打印 canvas vue formData height link var pdf

//文件名随便取一个如：htmlToPdf.js // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' import store from '../store' export default { install (Vue, options) {

Vue.prototype.getPdf = function (title) { var element = document.querySelector('#' + title); // 这个dom元素是要导出pdf的div容器

setTimeout(() => {

html2Canvas(element, { allowTaint: true, taintTest: false, useCORS: true, async: true, scale: '1', // 放大倍数 dpi: '192', // 精度 }).then(function (canvas) { //未生成pdf的html页面高度 var leftHeight = canvas.height;

var a4Width = 595.28 var a4Height = 841.89 //一页pdf显示html页面生成的canvas高度; var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

//pdf页面偏移 var position = 0;

var pageData = canvas.toDataURL('image/jpeg', 1.0);

var pdf = new JsPDF('x', 'pt', 'a4'); var index = 0, canvas1 = document.createElement('canvas'), height; pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen'); // $('.head-content').append($( // '<div class="pdfTip">' + // ' <div>正在生成第<span class="pdfProgress">1</span>页，共<span class="pdfTotal"></span>页...' + // '</div>')); function createImpl (canvas) { if (leftHeight > 0) { index++;

var checkCount = 0; if (leftHeight > a4HeightRef) { var i = position + a4HeightRef; for (i = position + a4HeightRef; i >= position; i--) { var isWrite = true for (var j = 0; j < canvas.width; j++) { var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) { isWrite = false break } } if (isWrite) { checkCount++ if (checkCount >= 10) { break } } else { checkCount = 0 } } height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef); if (height <= 0) { height = a4HeightRef; } } else { height = leftHeight; }

canvas1.width = canvas.width; canvas1.height = height;

// console.log(index, 'height:', height, 'pos', position);

var ctx = canvas1.getContext('2d'); ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);

var pageHeight = Math.round(a4Width / canvas.width * height); // pdf.setPageSize(null, pageHeight) if (position != 0) { pdf.addPage(); } pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4Width, a4Width / canvas1.width * height); leftHeight -= height; position += height; // $('.pdfProgress').text(index + 1); // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef)); if (leftHeight > 0) { setTimeout(createImpl, 500, canvas); } else {

store.commit('setdisplayshow', true) document.getElementById("iframe123").src = pdf.output('datauristring');

// pdf.save(pdfName + '.pdf');

// var blob = pdf.output("blob") // let formData = new FormData(); // formData.append("dir", 'sz'); // formData.append("ori", 1); // formData.append("origName", Date.parse(new Date()) + '.pdf'); // formData.append("Filedata", blob); // Vue.prototype.$post('v1/rest/file/uploadOSS', formData, { // succeedHandler: res => { // window.open(res.data.path, '_blank') // // var link = document.createElement('a') // // link.download = Date.parse(new Date()) + '.pdf' // // link.style.display = 'none'; // // link.href = res.data.path // // document.body.appendChild(link); // // link.click(); // // document.body.removeChild(link); // Toast.clear() // } // }) // // $('.pdfTip').remove();

} } }

//当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < a4HeightRef) { pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight); // pdf.save(pdfName + '.pdf')

store.commit('setdisplayshow', true) document.getElementById("iframe123").src = pdf.output('datauristring'); } else { try { pdf.deletePage(0); // $('.pdfTip').show(); // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef)); setTimeout(createImpl, 500, canvas); } catch (err) { console.log(err); } } }); }, 0); } } } //vue页面 <el-button @click="printProduct">打印</el-button> <iframe id="iframe123" frameborder="0" :width='$store.state.displayshow?"100%":"0"' :height='$store.state.displayshow?"700":"0"'></iframe> //打印 printProduct(){ let prt='print_'+this.typenum this.getPdf(prt) },

标签：并打印,canvas,vue,formData,height,link,var,pdf
来源： https://www.cnblogs.com/wangjianping123/p/15308871.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue html转pdf并打印