如何使用 vue.js 中的 JavaScript 將 png 轉換為 pdf 節點版本 10

Question

我曾嘗試使用 jspdf，但它適用於節點版本 >=12。 所以我只使用了 canvas 代替。 在這里，當我執行 canvas.toBuffer 時，它說它不是 function。

到目前為止，我的代碼是：

const canvas = createCanvas(2480, 3508, "pdf");
          const ctx = canvas.getContext("2d");
          loadImage(`URLTOImage`).then(image => {
            ctx.drawImage(image, 0, 0, 2480, 3508);
            const buffer = canvas.toBuffer("application/pdf");
          })

Answer 1

你不能。 干凈利落。

您正在嘗試轉換二進制文件類型，這在瀏覽器中實際上無法實現，這是有充分理由的。

這是服務器端操作，因此需要以某種方式在服務器上執行。

@IVOGELOV 已經為您提供了一個解決方案，可以在 github 免費獲得：

https://github.com/alvarcarto/url-to-pdf-api

自述文件的最頂部甚至還有一個按鈕，可直接將您帶到Heroku進行部署。

只需單擊下圖中的鏈接：

您可以在幾分鍾內免費啟動並運行它。

Answer 2

幸運的是我自己得到了解決方案。 我使用 pdfmake 依賴項使其工作，代碼如下：

從 'pdfmake/build/pdfmake' 導入 pdfMake 從 'lodash' 導入 { debounce }

  docDefinition() {
  return {
    content: [
      {
        image: 'base64code of Image'
        width: 550,
        height: 820,
      },
    ],
    pageSize: 'A4',
    pageOrientation: 'portrait'
  }
},
async makePDFFun() {
  this.generatePDF = await debounce(() => {
    pdfMake.createPdf(this.docDefinition()).getDataUrl(dataUrl => {
      this.pdfDataUrl = dataUrl
      saveAs(this.pdfDataUrl)
    })
  }, 0)
  const rar = await this.generatePDF() }