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

在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时出现的问题,换行不被渲染,见图:

 

 

 

上图是页面的效果,作品链接的地方是换行了的,可是使用旧版本的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