
vue使用html2canvas导出图片转为pdf以及过程中滚动条内容无法获取的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
今天做了一个需求, 需要把一些数据导出为pdf,在网上看了很多的导出方法,都是通过html2canvas + jspdf来制作的 ,但是在因为没有详情,做好后发现有滚动条的地方没有生成图片,找了很多文章都没有解决,然后自己梳理了一遍代码,也把关于滚动条的问题写了一下,有兴趣的可以看看。
首先安装 html2canvas 这个作用是实现将 html 页面转换成 图片
npm install --save html2canvas
然后是 jspdf 这个插件的作用是将图片转为 pdf
npm install jspdf --save
安装好后,在你的项目里创建一个js文件,项目里应该会有个专门放js文件的公共文件夹,或者自己生成一个也可以,我这里的是 /src/utils/toPdf.js
然后直接把这段代码 CV过去就行
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install(Vue, options) {
Vue.prototype.getPdf = function(vvv) {
var title = vvv || '导出'
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function(canvas) {
const contentWidth = canvas.width //画布宽度(#pdfDom宽度)
const contentHeight = canvas.height //画布高度(#pdfDom高度)
const pageHeight = contentWidth / 595 * 842 // 页面高度 = 画布宽度/a4宽*a4高
let leftHeight = contentHeight // 左侧高度 = 画布高度
let position = 0 // 位置
const imgWidth = 595 // 每张pdf宽度为 a4 宽度
const imgHeight = 595 / contentWidth * contentHeight // 每张图片高度 = a4宽度 / 画布宽度 * 画布高度
const pageData = canvas.toDataURL('image/jpeg', 1.0) // 将div内容转为图片
const PDF = new JsPDF('', 'pt', 'a4') // 调用jspdf插件
if (leftHeight < pageHeight) { // 当画布高度小于页面高度时
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 将图片转为pdf
} else {
while (leftHeight > 0) { // 当画布高度大于0时进入循环
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) // 从位置 0 生成图片
leftHeight -= pageHeight // 画布高度 -= 页面高度 当图片生成后 页面还有内容没有生成图片的时候
position -= (842) // 从第二张a4纸的高度开始生成图片
if (leftHeight > 0) { // 当画布高度大于0时生成第二页
PDF.addPage()
}
}
}
PDF.save(title + '.pdf') // 导出pdf 命名
}
)
}
}
}
我写的比较细,里面每一步的步骤和参数都列举出来了,
接下来在main.js中引入 topdf.js 就可以了
// 引入pdf导出
import toPdf from './utils/topdf'
Vue.use(toPdf)
然后就可以在页面中使用了, 因为我在js中声明了方法,所以直接调用getPdf()就可以
<div id="pdfDom">
// 里面的内容就是导出为pdf的内容
</div>
<el-button @click="getPdf('文件名称')">导出PDF</el-button>
在导出时,有时候会出现导出内容有滚动条的话导出内容不全,只能导出可视部分,滚动条隐藏掉的内容不会展示出来,这个问题我也看了很多的文档,发现都没有什么好的方法可以解决,所以我的解决方法就是:把含有滚动条的内容放在页面外部,这样就可以了,但还有问题就是会导致导出的内容不全,但还能克服,如果以后有什么比较好的解决方法麻烦踢我一脚。
<div class="content">
<div id="pdfDom">
// 里面的内容就是导出为pdf的内容
<div>
需要导出的内容
// 手写滚动条(手动狗头🐕)
</div>
</div>
</div>
<el-button @click="getPdf('文件名称')">导出PDF</el-button>
<script>
.content {
height: calc( 100vh - 100px);
}
</script>
// 简单来说就是用pdfDom把出现滚动条的内容包裹起来。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)