!记录+吐槽自己太菜
去年做项目时,有个需求,页面转pdf并下载。在网上看到html2cavans和jspdf可以实现,就开始搞,然后踩坑之路就开始了。
遇到的问题:
1.有滚动条时,只能导出当前页
1.页面过多时不清晰
3.当数据过多时卡死或者导出的pdf有黑块
4.图片跨域
5.文字和图片等会被截断
使用方法:
可以看这篇文章
https://zhuanlan.zhihu.com/p/140678006
前两个问题,网上百度可以找到解决方案。
关于图片出现跨域:
在网上看了加属性什么都没解决,最后是后端把图片以流的形式返回,然后再导出,页面图片只有一张或者少了可以这样做。
数据过多时卡死:
我们最后放弃了用html2cavans和jspdf,改用浏览器打印,利用window.print()
文字被截断:
如果客户能接受,用html2cavans可以不分页。用window.print()文字和图片没发生截断,但因为页面中有表格和图表还是没法避免,最后只能看一页能放多少内容,固定下每块内容的高度,只能算暂时避免了截断。(还是要感叹一下太菜。。。。)
下面是移动端预览pdf
这是最近的需求,因为之前遇到的问题,当我看到pdf时就有了不好的预感。
- 刚开始使用vue-pdf,网上有很多文章,讲的也很好。指路:vue-pdf
遇到问题:
安装打开之后一直报错,不知道是不是版本问题,后退了版本也没解决。报错如下:
但是页面还是好的就想着忽略报错,结果又遇到新的报错:
内存无法分配。。。。这是什么鬼啊 - 后来改成pdfh5,指路pdfh5,这个数据过大时会慢。但是没遇到别的问题。
- 最后我采用的是pdfjs,指路pdfjs
好巧,我又又又又又遇到了问题,可能是pdfjs官网是最新版的,文章是之前的所以下载下来使用方法不一样,而且我又遇到了这个错:
无奈只能找到别人贴的git链接,把pdfjs文件夹拿过来,然后一堆警告:
只能再js中找到注释掉。。。。。最后算是勉强解决。。。。
搞完这些,我想劝退自己。。。。不知道哪里操作不对,遇到错也不会解决。。。(反省。。。)