使用pdfh5.js预览pdf 使用jspdf与html2canvas导出pdf

1.开发工具VScode

2.使用框架Taro

3.安装pdfh5

yarn add pdfh5

4.安装jspdf

yarn add jspdf

5.安装 html2canvas

```

yarn add html2canvas

```

6.使用

在tsx里面引入

import "pdfh5/css/pdfh5.css"

import {jsPDF} from "jspdf"

import html2canvas from "html2canvas"

创建pdf控件

try {

        // 缓存中的pdfUrl

        let PDFurl = '你的pdf网址'

        if (PDFurl) {

          if (process.env.TARO_ENV === 'h5') {

            // 因为小程序引入报错，所以按需加载 npm i pdfh5

            let Pdfh5 = require('pdfh5')

            //实例化

            this.pdfh5 = new Pdfh5("#Pdf", {

              pdfurl: PDFurl,

              // logo:{src:showImage,x:400,y:130,width:100,height:100},

              logos:[{

                logo:{src:showImage,name:value,x:175,y:200,width:100,height:100,font:'20px',color:"#ff0000"},//name:你要加入的文字 xy 位置 font 字体 color字体颜色

                pageNum:1

              },

              {

                logo:{src:showImage,name:'wangwu',x:195,y:200,width:100,height:100,font:'20px',color:"#ff0000"},

                pageNum:1

              },

              {

                logo:{src:showImage,name:'lisi',x:360,y:150,width:100,height:100,font:'30px',color:'#00ff00'},

                pageNum:3

              },

            ]

            });

          }

        }

      } catch (e) {

      }

      return dataUrl;

  }

在界面中添加pdf控件

pdfh5.js的修改

在renderCanvas方法里面

return page.render(renderObj).then(function() 这个返回里面增加代码

if(options.logos){

                    // console.log('====>ssssssss');

                    options.logos.map((item,index)=>{

                        if(item.pageNum == pageNum){

                            //---------------------水印开始---------------------

                            var cover = document.createElement('div');

                            cover.className = "cover";

                            cover.innerText = item.logo.name; //这里就是水印内容，如果要按照不同的文件显示不同的水印，可参考pdf文件路径的传值方式，在viewer.jsp中head部位接收后台传值并在这里使用

                            container.appendChild(cover);

                            // div.appendChild(cover);

                            console.log('====>水印3');

                            var coverEle = document.getElementsByClassName('cover'),size = 0,

                                nowWidth = +obj2.canvas.style.width.split("p")[0],

                                //714为100%时，每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值

                                size = 50 * nowWidth / 714 + "px";

                            for(var i=0, len=coverEle.length; i

                                if(i == index){

                                coverEle[i].style.fontSize = item.logo.font;

                                coverEle[i].style.height = obj2.height/ 10;

                                coverEle[i].style.position = 'absolute';

                                coverEle[i].style.color = item.logo.color;

                                coverEle[i].style.disable = 'flex';

                                coverEle[i].style.top  = item.logo.x+'px';

                                coverEle[i].style.left  = item.logo.y+'px';

                                }

                            }

                            container.appendChild(cover); 

                        }

                    })

                }

在init方法里面

Pdfh5.prototype = {

        init:

在viewer.className = 'pdfViewer';之后增加代码

viewer.id = 'pdfViewer';

在pdfh5.css里面增加

.cover {

  display: block;

  position: absolute;

  z-index: 9999;

  cursor: default;

  /* user-select: none; */

}

在你要导出的界面增加导出pdf的代码

function toImage() {

    var view = document.getElementById('pdfViewer')

    console.log(view);

    html2canvas(view).then(canvas => {

      let dataURL = canvas.toDataURL("image/jpeg",1);

      var contentWidth = canvas.width/3;

      var contentHeight = canvas.height/3;

      // var pageHeight = contentHeight/5;

      var pageHeight = contentWidth / 446* 640;

      //未生成pdf的html页面高度

      var leftHeight = contentHeight;

      //页面偏移

      var position = 0;

      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

      var imgWidth = contentWidth;

      var imgHeight = (446 / contentWidth) * contentHeight;

      // this.imgUrl = dataURL;

      console.log("11111")

      console.log(dataURL)

      var pdf = new jsPDF('','px','a4');

      console.log('contentHeight ==>'+contentHeight + "    contentWidth===>"+contentWidth+'  pageHeight===>'+pageHeight+'  leftHeight'+leftHeight+'    position'+position+'  imageHeight='+imgHeight+'  imageWidth='+imgWidth)

      if(leftHeight < pageHeight) {

        pdf.addImage(dataURL,  0, 0, imgWidth, imgHeight );

      } else{     

        while(leftHeight > 0) {

              // pdf.addImage(dataURL,  0, position, 803, 5676)

              pdf.addImage(dataURL,  0, position, imgWidth, imgHeight)

              leftHeight -= pageHeight;

              position -= 631;

              if(leftHeight > 0) {

                pdf.addPage();

              }

        }

      }

      pdf.save('a4.pdf')

    });

  }

新人做的，欢迎大佬指正