前端小工具-HTML轉換PDF
HTML轉換圖片

HTML轉換PDF，主要用 html2canvas+jsPDF 對頁面進行截圖然後轉換PDF。
1. 安裝依賴

npm install jspdf
npm install html2canvas @1.3.4

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

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

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