vue 使用htmlToPdf遇到的坑

最新推荐文章于 2024-04-12 16:13:45 发布
原创 最新推荐文章于 2024-04-12 16:13:45 发布 · 855 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了一个关于使用htmlToPdf时遇到的问题及解决方案。主要问题是下载包含图片的表格时出现跨域错误，通过调整htmlToPdf的参数allowTaint为false及useCORS为true成功解决了此问题。

1、使用htmlToPdf实现pdf下载中遇到的坑！！下载的表格中有一张图片，控制台一直报错在这里插入图片描述
然后我查到的资料都让修改img crossorigin=anonymous ，一直没有作用
后来感觉改的方向不对就开始查阅htmlToPdf文档

2、解决办法
如果再vue中使用htmlToPdf报上图所示错误
设置htmlToPdf参数allowTaint：false;useCORS: true
在这里插入图片描述
这样就解决了Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.报错问题

vue.js+jspdf.js+html2pdf.js 实现页面导出PDF
cosmos16的博客
08-12 5849
vue.js+jspdf.js+html2pdf.js 实现页面导出PDF 原本是导出word但客户考虑到问到的安全性要求改成了PDF，由于之前的word导出也是有前端生成的，所以为了不增加工作量导出依旧有前端完成。起初在网上找了很多方法都无法实现，都想放弃了让后端写，后来看到了关于jspdf.js+html2canvas.js的文章，想着试试看吧。对于前端导出PDF我就是个小白，啥也不会。按着文章一步步写吧。 安装插件html2canvas和jspdf npm install html2canvas--s
一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍（2021版） PDF，面试官问的源码问题绝对稳了！
weixin_56134381的博客
06-15 953
趁着端午假期，熬夜将Vue 99%出镜率的高频面试题整理了一下。覆盖Vue3.0
java html转PDF
ccr1001ccr1001的博客
04-06 2197
根据网上java io.woo.htmltopdf依赖库在windows测试能运行，一旦部署到线上总是报依赖的so文件找不到，按照官网文档安装各种ubuntu下依赖都不行，只能放弃。因此本文直接用linux或者windows上htmltopdf工具，执行命令行的方式进行。itextpdf样式不好，也是放弃的。 1. 下载工具包 windows上水印添加需要配置环境。 下载地址wkhtmltopdf ubuntu下载 apt install wkhtmltopdf 2.代码实现 pack..
wkhtmltopdf 解析chart不成功的问题
zxyheyen的博客
11-23 1062
wkhtmltopdf 解析chart不成功的问题
canvas节点无法导出图片_HTML转为PDF，图片导出失败的终极解决方案
weixin_39553705的博客
12-24 1548
如题项目有需求将一个页面导出为pdf,然而页面中的图片却始终无法导出成功一、导出的方法查询了许多大佬的帖子，找到了如下导出的方法const PdfDownload = function(domId) {var targetDom = $('#'+domId)//把需要导出的pdf内容clone一份，这样对它进行转换、微调等操作时才不会影响原来界面var copyDom =targetDom.clo...
使用wkhtmltopdf转vue网页为PDF的坑
timeless的博客
01-21 8023
1 首先是数据显示问题,vue中使用method:{methodname() {}}这种写法，网页可以正常渲染 但是PDF无法渲染数据，改写为method : {method:function(){}} 2 显示出ajax数据以后 发现英文可以正常显示，中文不显示(linux上)。 解决方案在linux字体文件夹下增加simsun字体文件 3 数据都显示了 样式出现问题 （1） 不分页  在...
freemark 踩坑之旅-使用openhtmltopdf 将 html 转 为 pdf分页问题
ifjgm003的博客
10-12 4412
image 概述 想要做出比较美观的pdf ，比较好的实现方式是使用html 转 pdf。后端生成html可以使用 freemark 去实现。由于很多时候freemark 中的数据是动态的，所以生成的html 也是动态的。很难排版，无法确定分页位置。那么在转pdf 的时候就面临分页的问题，特别是表格。一个表格被分割成两页，不仅影响美观，查看数据也不是很方便，如下所示 ...
vue中markdown转为pdf
最新发布
04-03
此外，用户之前遇到的错误`Cannot read properties of null`可能涉及到DOM操作的问题，如果在PDF生成过程中需要操作DOM元素，必须确保在正确的生命周期钩子中执行，比如在`mounted`之后，或者使用虚拟DOM的方法。...
Vue2中使用Element UI：集成方案+8个常见坑点避坑指南
[Vue2中使用Element UI：集成方案+8个常见坑点避坑指南](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fb3cbb188034eb785ab5ea432d495a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp) # 摘要 ...
Egg + Puppeteer 实现Html转PDF(已开源)
俊劫的前端技术圈儿
09-08 1129
一套根据Html输出PDF的服务，解决前端打印渲染兼容性问题。代码已开源，欢迎star👏🏻👏🏻👏🏻
使用vue-pdf实现文档在线预览报错（this.pdfSrc.then is not a function）
andy_boke的博客
08-14 3398
使用vue-pdf实现文档在线预览报错 最近项目需要实现移动端在线预览PDF文件的功能，最终使用了vue-pdf这个组件，使用vue-pdf组件时候，百度了它的使用方法，但大部分都一样，而且使用了还报错（下图）。 后来看了 vue-pdf 代码仓库发现，百度到的使用方法少了个 promise，我不知道他们的为什么能够直接成功，但是如果你的也报错了，可以试试我的操作。 不要忘记定义变量pdfSrc、numPages。 <pdf v-for="i in numPages" :key="i"
html2Canvas结合jspdf前端页面生成pdf文件，数量太多生成黑屏文件
zengzhi1399的博客
04-12 2376
如图，在获取到所有的需要生成的页面元素之后，对他进行了截取，我这里是每次将10张去生成。在拼接的时候也尝试了不同的方法，直接拼接啊，toString什么的，还有Blob转二进制流在拼接啊，都尝试了，但是最后还是不行。其中还有一个问题，因为每次分段生成，那么那个base64编码已经是一个完成的编码，他的前缀和结尾都是一个完整的文件的编码。最后本人的方法可能有些复杂啰嗦了，因为html2Canvas和jspdf并没有对生成数量有什么限制，可能是我的配置还有完善的地方，欢迎大家指正，如果能帮到你也是非常荣幸。
Js：html转pdf插件总结（纯前端）
热门推荐
努力的nana
08-11 1万+
pdfmake默认不支持中文，所以需要安装字体文件。
关于更改了vue版本报出的错误：Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a
weixin_63136716的博客
02-16 2914
Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function。 Vue packages version mismatch: - vue@2.6.14 (D:\company_project\jcek\jcek-frame-web\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.7.10 (
JS导出HTML至PDF文件
canxiaoL的博客
07-12 969
jsPDF，js导出
vue-pdf使用及遇到的问题总结，ios使用vue-pdf会有白屏的bug
qq_41314448的博客
05-22 2173
vue-pdf使用及遇到的问题总结，vue-pdf-sign
jspdf+html2canvas各种踩坑（包括超过浏览器限制高度下载）
weixin_45332018的博客
02-09 4764
使用jspdf+html2canvas的一些采坑 本文代码是基于jq+jspdf+html2canvas写的，要实现将html文档下载成pdf，中间遇到的问题有：1、文件下载后如果没有置顶的话html2canvas会生成出黑屏。2、代码中有大片生成的echars图表，这种只能在原有的dom节点上生成canvas，进行下载，无法cloneNode()一个节点去进行操作。3、html2canvas生成图片时如果不对html2canvas进行配置可以显示图片的话，图片显示不出来。4、页面中有大量的图表（超过浏览器
Vue.js中使用vue-pdf插件实现PDF文件流预览
一旦安装和引入了vue-pdf插件，就可以在Vue组件中使用它来预览PDF文件了。vue-pdf提供了一个简单的`<pdf>`标签，通过这个标签可以非常方便地嵌入PDF文件。基本的使用方法如下： ```html <pdf :src="pdfSrc" @...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值