如何使用 vue.js 中的 JavaScript 将 png 转换为 pdf 节点版本 10

Question

I have tried using jspdf but it works with node version >=12. so i used only canvas instead. here when i do canvas.toBuffer, it says it is not a function.

so far my code is:

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

You can't. Plain and simple.

You're attempting to convert binary filetypes, which can't realistically be achieved in the browser, and for good reason.

This is a server-side operation, and therefore needs to be performed on a server in some way-shape-or-form.

@IVOGELOV has already provided a solution for you, which is available on github for free:

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

There's even a button at the very top of the README, that takes you directly to Heroku to deploy it.

Just click the link in the following image:

You can get it up and running in minutes, for free.

Answer 2

luckily i got the solution by myself. i used pdfmake dependency to make it work, here goes the code:

import pdfMake from 'pdfmake/build/pdfmake' import { debounce } from 'lodash'

  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() }