vue html转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')

// 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>

//打印

printProduct(){

let prt='print_'+this.typenum

this.getPdf(prt)