问题-vue预览页面导出

本文介绍了在Vue项目中使用html2canvas+jspdf实现HTML转PDF的方法,解决预览和导出隐藏DOM的问题。遇到的核心问题是core-js版本与jspdf的不兼容,以及如何导出不可见的DOM。解决方案包括引用服务器上的jspdf文件以避免版本冲突,以及通过CSS调整使预览DOM不可见以实现导出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(68条消息) vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)_前端辣么菜的博客-优快云博客 

        具体实现方法见上链接

        目前网上比较流行的将页面截图生成pdf的方式里,html2canvas+jspdf经我评测是最好用效果最好的,其他的不是只能截图导出当前页面就是效果特别不清晰,而这种方式可以按照指定dom来截取生成pdf,不是只能截取当前页面,还可以截取当前看不到的页面,适用于预览按钮和导出按钮在同一页面的功能 

         坑1:项目中使用core-js版本为2.6.12    babel-polyfill版本为6.26.0

        开发vue的core-js版本为2.6.12,jspdf中依赖的是最新版本3.x,就会导致启动vue的时候报  Can't resolve 'core-js/shim' in  \babel-polyfill\lib';

        core-js升级到3以后,就会报Can‘t resolve ‘core-js/modules/es.symbol‘ ,与现有vue依赖包冲突,打包都打不了

解决办法:

        将jspdf中的polyfills.umd.js和jspdf.umd.js上传到服务器上,通过下面这种方式来引用,干掉jspdf依赖包,core-js版本不变还是为2.6.12,htmlToPdf.js中的new JsPDF改成window.jspdf.jsPD

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值