html2canvas
html2canvas在浏览器上对整个或者局部页面进行“截图”,也就是通过遍历页面的DOM结构,搜集所有元素信息及样式,渲染出canvas image。
由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。
jsPDF
jsPDF库可以用于浏览器端生成PDF
html2canvas+ jsPDF 实现html转pdf并下载
1、下载插件模块
npm install html2canvas jspdf --save
2、定义功能实现方法
创建htmlToPdf.js文件,代码如下:
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function (id) {
var title = this.htmlTitle
var pdfDom = document.querySelector(`#${id}`)
var width = pdfDom.offsetWidth; //dom宽
var height = pdfDom.offsetHeight; //dom高
var scale = 2; //放大倍数
var opts = {
dpi: window.devicePixelRatio * 2,
scale: scale,//添加的scale参数
width: width,
height: height,
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
// allowTaint: true
};
var canvas = document.createElement("canvas")//创建一个canvas节点
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
var context = canvas.getContext("2d")
context.scale(2, 2) // 增强图片清晰度
html2Canvas(pdfDom, 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
//a4纸的尺寸[595.28,841.89],html 页面生成的 canvas 在pdf中图片的宽高
let imgWidth = 590
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)//0-1清晰度
let PDF = new JsPDF('', 'pt', 'a4')// 下载尺寸 a4 纸 比例
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
// PDF.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置
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(title + '.pdf')
})
}
}
}
3、全局引入
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)
4、在页面使用
点击时调用绑定在Vue原型上的getPdf方法,传入id即可
//html
<div id="pdfDom">
<div >显示的内容</div>
</div>
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>
//js
export default {
data () {
return {
htmlTitle: '页面导出PDF文件名'
}
}
}```