在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all

前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, 以前没做过那就开始查资料吧,还真的发现有生成pdf文件的组件(此处感谢前辈们写的组件),叫做 jspdf.

然后还有一个把页面渲染成画布的插件,叫做 html2canvas, 那好,开心写吧.

但是首先这两个插件的导包就让我头疼, 因为网上的例子大多数都是js标签导包的,而我们用的是react框架, 版本号我最后在github上找到了,

"html2canvas": "1.0.0-alpha.12"

"jspdf": "1.5.3"

这里要说一句, html2canvas的导包是有坑的, 因为我在做渲染画布的时候发现换行的样式不能被渲染,把导包换成最新的就行了,我也建议大家用最新的版本,虽然是alpha版本,不过也是无奈之举,最后细讲.

好了可以开始写了,先在页面引入

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

生成并下载的代码如下:

 /** 导出授权证书 */

     exportCertificate(orderitem,item){

         var jsonstr = eval('(' + orderitem.attachment + ')');

         var title = item.title;

         // 如果要操作数据在这里写

         // 然后把DOM元素传进去

         html2canvas(document.getElementById('authorization'), {

             allowTaint: false,// 这些参数的配置可以在官方api找到

             taintTest: false,

             letterRendering: true

         }).then(function(canvas) {

             var pageData = canvas.toDataURL( 'image/jpeg', 1.0);// 画布转为图片

             var pdf = new jsPDF('', 'pt', 'a4');// 生成pdf对象,方向默认竖直，尺寸ponits，格式a4[595.28,841.89]

             pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height ); // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩

             pdf.save(title + '-authorization.pdf'); // 文件名可以自己取一个

         });

     }

html2canvas文档简书地址:https://www.jianshu.com/p/6a07e974a7e8

在使用旧版本的html2canvas时出现的问题,换行不被渲染,见图:

在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all-LMLPHP

上图是页面的效果,作品链接的地方是换行了的,可是使用旧版本的html2canvas的时候存在的问题就是渲染成画布的时候不换行,之前用的版本是0.5.0beta:见图

后来版本改为1.0.0-alpha.12就好用了,如图

　　参考链接,谢谢大神们

https://www.cnblogs.com/jinzhenzong/p/9328985.html

https://blog.csdn.net/weixin_42078778/article/details/81487710