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')
// 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() // } // })
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) },