html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断

1、安装html2canvas和JsPdf

//第一个.将页面html转换成图片

npm install --save html2canvas

//第二个.将图片生成pdf

npm install jspdf --save

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

install (Vue, options) {

Vue.prototype.getPdf = function () {

//当点击下载pdf按钮不在页面顶部的时候会造成PDF样式不对

//首先回到页面顶部在下载PDF

let top = document.getElementById('pdfDom');

if (top != null) {

top.scrollIntoView();

top = null;

}

var title = this.htmlTitle

html2Canvas(document.querySelector('#pdfDom'), {

allowTaint: true

}).then(function (canvas) {

var pdf = new JsPDF('p',