前端vue项目，把某个div盒子或当前页面生成pdf文件并下载。

目录标题

• • • • 安装依赖

• 一、全局方法 （无论哪个页面都可调用）

• 二、局部方法

一、全局方法 （无论哪个页面都可调用）

1、新建一个htmlToPdf.js文件，拷入以下代码

import html2Canvas from ‘html2canvas’

import JsPDF from ‘jspdf’

export default{

install (Vue, options) {

Vue.prototype.getPdf = function (title) {

html2Canvas(document.querySelector(‘#pdfDom’), {

allowTaint: true

}).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(title + ‘.pdf’)

}

)

}

}

}

如图：

2、main.js引入

import htmlToPdf from ‘./htmlToPdf’;//路径根据自己的js文件来引入

Vue.use(htmlToPdf);

3、事件

给需要生成pdf的盒子设置id：pdfDom

给按钮一个全局事件方法getPdf('个人征信报告')，参数是文件名

二、局部方法

1、组件内引入

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。