本文介绍了在VUE项目中如何使用html2canvas和JsPdf将页面转换为PDF，同时解决图片被切断的问题。通过安装和配置这两个库，定义全局函数，处理滚动定位，以及调整CSS样式，特别是针对动态内容的处理，确保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',
最低0.47元/天 解锁文章
扫一扫
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
