前端小工具-HTML转换PDF

前端小工具-HTML转换PDF
HTML转换图片

HTML转换PDF，主要用 html2canvas+jsPDF 对页面进行截图然后转换PDF。

实践时间和兼容性，html2canvas 存在历史遗留问题，微信环境会假死，iOS13.4,13.7 等版本也假死的情况，低版本html2canvas对新浏览器支持也够。后来个人项目直接废弃了。

html2canvas 太强大，同时也遗留很多兼容问题，主要用到的是html转换图片，通过 dom-to-image 替换一下

1. 安装依赖

npm install jspdf
npm install html2canvas @1.3.4
npm install dom-to-image

html2canvas 版本有点问题，部分截图不全，点击无效的情况，小心使用。

2. HTML转换图片
给滚动BOX内层添加 id ，如果没有内层，那需要嵌套一个，如果直接给滚动层添加id，那截图只有可视区域。注意！

使用dom-to-image转换成图片

let element = document.getElementById('element-to-print');
domtoimage.toBlob(element).then(blob => {
    option.FormDataImg = blob;
});
              

使用html2canvas转换成图片

let element = document.getElementById('element-to-print');
html2canvas(element).then(canvas => {
  canvas.toBlob(blob => {
    const blobUrl = window.URL.createObjectURL(blob);
  }, 'image/jpeg');
});

其中 blobUrl可以用于页面直接显示了，如果要直接保存下载，直接使用blobUrl也是可以的了 。

如果要保存图片到服务器上面，要看接口是否支持blob了，如果支持直接传递就可以了，

一般情况支持类型都是File，所以，还需要对blob进行file文件转换

handleFileUpload = blob => {
    return new Promise((resolve, reject) => {
      try {
        const file = new window.File([blob], parseInt(Math.random() * 100000, 10) + 'updata.jpg', {
          type: 'image/jpeg',
          lastModified: Date.now(),
        });
        const params = new FormData();
        params.append('file', file);
        axios.post(Paths.fileUpload, params).then(res => {
          if (res.data.code === 0) {
            resolve(res.data.data);
          } else {
            reject();
          }
        });
      } catch (error) {
        reject(error);
      }
    });
  };

File对象不太了解的话，得自己查阅文件了。

FormData文件流必须的，其中params.append('file', file)，就是接口指定的文件参数，具体指定看服务端要求。

3. 图片转换PDF

let element = document.getElementById('element-to-print');
html2canvas(element).then(canvas => {
    handlePdfFile(canvas)
});
handlePdfFile = canvas => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    const pageData = canvas.toDataURL('image/jpeg', 1.0);
    const pdfX = ((contentWidth + 10) / 2) * 0.75;
    const pdfY = ((contentHeight + 100) / 2) * 0.75; // 100为底部留白
    const imgX = pdfX;
    const imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离
    const PDF = new jsPDF('', 'pt', [pdfX, pdfY]);
    PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
    // PDF.save('download.pdf');
    const pdfFile = PDF.output('blob');
    console.log(pdfFile);
};

PDF.save('download.pdf');就可以直接保存文档了，部分移动端无效的情况，微信环境下需要使用微信api，浏览器转换下自己用方法下载，PDF.output('dataurl);直接导出文件路径。

PDF.output('blob');同上blob文件，也可以转换URL使用，或者转化文件对象保存服务环境。

jsPDF还有多种生成技巧，具体可以参考官方例子和文档：https://github.com/parallax/jsPDF

html2canvas官方例子文档比较完善，具体可以参考官方例子和文档：http://html2canvas.hertzen.com/documentation

Word、PDF、Excel、log日志文档预览，更多文件转换技巧请查看：https://www.cnblogs.com/bore/p/13072477.html

时间是一个好东西，记录的是爱你的证据