主要通过html2canvas和jspdf两个插件实现
通过html2canvas将HTML页面转换成图片,然后再将图片转换成base64,通过jspdf生成pdf文件
1、安装插件
npm install html2canvas jspdf --save
2、写实现方法
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default (elementId, fileName) => {
if (!elementId) throw new Error("请传入元素id")
const container = document.querySelector(`#${elementId}`)
const canvas = document.createElement("canvas")
const contentWidth = container.clientWidth
const contentHeight = container.clientHeight
const scale = window.devicePixelRatio
const canvasCcale = 3
canvas.width = contentWidth * canvasCcale;
canvas.height = contentHeight * canvasCcale;
canvas.getContext("2d").scale(canvasCcale, canvasCcale);
const opts = {
scale: scale,
canvas: canvas,
width: contentWidth,
height: contentHeight,
useCORS: true,
};
html2Canvas(container, opts).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let 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 -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(fileName + '.pdf')
})
}
3、 引入并调用
import htmlToPdf from "@/utils/htmlToPdf"
htmlToPdf('domID', '文件名称')
也可以写成vue插件方式
1、定义方法
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.htmlToPdf = function (elementId, fileName) {
....
....
}
}
}
2、引入注册
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)
3、使用
<el-button type="primary" @click="htmlToPdf('#domID', 'fileName')">下载</el-button>
遇到的问题:解决方案