前端小工具-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

時間是一個好東西，記錄的是愛你的證據