Creating PDFs in Quasar / Electron project

[CynthiaBlue]

I've been spending a lot of time trying to find a PDF creator/viewer I can use with my Quasar/Electron project.

It looks like app-extension-qpdfviewer doesn't work with electron (waiting on a reply to make sure). quasarframework/app-extension-qpdfviewer#7

From what I understand, using electron, I need to use the pdf.js version, and not the html5 version (though I'm still trying to understand it all).

I've been trying to find some electron & pdf.js tutorials, but since I'm still really new to electron I am having difficulty implementing them into my quasar/electron app. Is pdf.js something I should be looking into using raw with my application?

This is one of the tutorials I find confusing: https://www.pdftron.com/blog/electron/how-to-build-an-electron-pdf-viewer/

Can anyone point me to a good tutorial, or give me information, on using creating PDFs with Quasar & Electron?
Thanks.

[CynthiaBlue]

Just some notes.

Looking into PDFTron, but it seems to be a paid item. My user base is TINY. LIke really I will sell probably 150 copies of my software, so I really need a solution that's free.

Looking at: https://github.com/praharshjain/Electron-PDF-Viewer
But I can't tell if that's still in development or not? There is no activity on the github.

[CynthiaBlue]

Looking at PDFjs-dist, but it looks like that is HTML5, and needing to use it as electron on a desktop application, I think I can't use HTML5, I have to use pdfjs... hm okay not sure about that. Can anyone clarify?

[ontwikkelfabriek]

@CynthiaBlue

Looking at PDFjs-dist, but it looks like that is HTML5, and needing to use it as electron on a desktop application, I think I can't use HTML5, I have to use pdfjs... hm okay not sure about that. Can anyone clarify?

I have successfully been using this repo to create (and view ) PDFs made with Quasar/Vue components:
https://github.com/kempsteven/vue-html2pdf

demo:
https://vue-html2pdf-demo.netlify.app/

From what I understand, using electron, I need to use the pdf.js version, and not the html5 version (though I'm still trying to understand it all).

It's html based and I don't see any reason why it wouldn't work in an Electron env.

[CynthiaBlue]

Thanks! I am looking into that. Currently getting a Warning:

[Vue warn]: Failed to resolve component: vue-html2pdf
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

I'm looking into a solution for that.

[ontwikkelfabriek]

@CynthiaBlue

Thanks! I am looking into that. Currently getting a Warning:

[Vue warn]: Failed to resolve component: vue-html2pdf
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

I'm looking into a solution for that.

Did you forgot to create a boot file to register the component?

// my vue-html.to.paper.js  boot file
const options = {
    name: '_blank',
    specs: [
        'fullscreen=yes',
        'titlebar=yes',
        'scrollbars=yes'
    ],
    styles: [
        'https://cdn.jsdelivr.net/npm/quasar@1.18.5/dist/quasar.min.css',
        'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'

    ],
    timeout: 1000, // default timeout before the print window appears
    autoClose: true, // if false, the window will not close after printing
    windowTitle: window.document.title // override the window title
}

import VueHtmlToPaper from 'vue-html-to-paper'

export default async ({ Vue }) => {
    Vue.use(VueHtmlToPaper, options)

    // or, using the defaults with no stylesheet
    // Vue.use(VueHtmlToPaper);
}

[CynthiaBlue]

@ontwikkelfabriek is a boot file need for vue-html2pdf ? I didn't see that in the documentation. In your post you have "VueHtmlToPaper". is that the same thing or something different?

edit.. it seems to me that they are two different things. I'm not familiar with the toPaper one, can it produce PDF files?

[ontwikkelfabriek]

@ontwikkelfabriek is a boot file need for vue-html2pdf ? I didn't see that in the documentation. In your post you have "VueHtmlToPaper". is that the same thing or something different?

edit.. it seems to me that they are two different things. I'm not familiar with the toPaper one, can it produce PDF files?

@CynthiaBlue

Ah yes you are correct that's a different library I have tried ( no success ). It's the vue-html2pdf that's working for me.

// my vue-html2pdf.js boot file
import VueHtml2pdf from 'vue-html2pdf'

export default async ({ Vue }) => {
    Vue.use(VueHtml2pdf)
}

[CynthiaBlue]

Gaaah this is killing me. Not being able to get PDFs to work in my project would be a show stopper.

I'm getting the error (above) with vue-html2pdf, so my application is not recognizing it at all.

Looking at https://github.com/eKoopmans/html2pdf.js but when I copy the code sandbox https://codesandbox.io/s/xlnzq7y28q?file=/App.vue:116-167 someone wrote, I get nothing.

Back to google I guess.

[mJeromeDiaz]

Hi @CynthiaBlue, i use https://github.com/eKoopmans/html2pdf.js too and i have no problems with it.

<div class="col" v-if="wantpreview" style="height: calc(100vh - 50px); overflow-y: scroll">
      <div class="column q-gutter-sm flex flex-center q-py-lg">
        <div class="page_fluid">
          <div ref="document">
            <div class="hero-image_preview" :style="'background-image: url(' + template.img + ');'">
              <div class="hero-text flex" :class="template.page_de_garde.title_placement">
                <div style="width: 80%; margin: auto">
                  <div class="f-28-600 text-left text-white" style="font-size:50px">{{ action.title }}</div>
                  <div class="f-20-600 text-left text-white q-mt-md">{{ frenchDate(action.start_datetime) }} - {{ frenchDate(action.end_datetime) }}</div>
                </div>
              </div>
            </div>

            <div class="q-pa-lg">
              <div class="f-18-400 q-my-md" :style="'color: ' + template.color">Diagnostic Initial</div>
              <div v-html="action.diagnostic"></div>
            <div class="sautDePage"></div>
          </div>
        </div>

      </div>
    </div>

    /**
     * doc canvas options : https://html2canvas.hertzen.com/configuration
     * doc jspdf options : https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
     * doc html2pdf.js : https://ekoopmans.github.io/html2pdf.js/
     */
    generateReport () {
      html2pdf(this.$refs.document, {
        margin: 0,
        filename: this.document.title + ".pdf",
        pagebreak:  { after: '.sautDePage' },
        image: { 
          type: "jpeg", 
          quality: 2
        },
        html2canvas: { 
          scale: 2, 
          letterRendering: true
        },
        jsPDF: { 
          unit: "in", 
          format: "a4", 
          orientation: "portrait"
        },
      })
    }
```
If you want a sandbox exemple it can share this next week ;)

[CynthiaBlue]

My latest attempt is using jsPDF, and it may actually be working... I gotta play around with it for a while.

http://raw.githack.com/MrRio/jsPDF/master/index.html

[edgarasne]

You might have solved it with external libs but given that you use electron and if you don't need some custom viewer just embed it with iframe.

And for creating pdf use built in print to pdf win.webContents.printToPDF to which none other pdf lib can come close if you want to convert html to pdf.

[CynthiaBlue]

I need to populate the PDFs with data and I don't know how to do that with just a just an iFrame. And I haven't found any information on win.webContents.printToPDF... I need detailed instructions when I'm learning. :)

[edgarasne]

I need to populate the PDFs with data and I don't know how to do that with just a just an iFrame. And I haven't found any information on win.webContents.printToPDF... I need detailed instructions when I'm learning. :)

As mentioned iframe is for displaying pdf not creating it.

You can find more info on official electron docs.
https://www.electronjs.org/docs/latest/api/web-contents#contentsprinttopdfoptions

If you copy this code and place it inside electron-main you should see pdf created on your desktop. Then you can modify it to your needs.

If you want detail instructions you will have to provide example of what you want and what you have already. Because "populate" pdf is very broad.

const { BrowserWindow } = require('electron')
const fs = require('fs')
const path = require('path')
const os = require('os')

const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('http://github.com')

win.webContents.on('did-finish-load', () => {
  // Use default printing options
  const pdfPath = path.join(os.homedir(), 'Desktop', 'temp.pdf')
  win.webContents.printToPDF({}).then(data => {
    fs.writeFile(pdfPath, data, (error) => {
      if (error) throw error
      console.log(`Wrote PDF successfully to ${pdfPath}`)
    })
  }).catch(error => {
    console.log(`Failed to write PDF to
 ${pdfPath}: `, error)
  })
})

[zutamacka]

Just here out of the blue...

I've found this works great&installs easy as a pdf viewer: https://qpdfviewer.netlify.app/all-about-qpdfviewer/what-is-qpdfviewer
You get an out of the box easy to use viewer and it should also implement pdfjs into your app so you can use it for custom pdf creation code.

Just one note; being a n00b I lost an abysmal amount of time on this: I am using pdfjs in my front end for pdf viewing, but also in my backend (nodejs + express + nodemon) for pdf processing. It took me a while to understand those two implementations are completely separate and backend one doesn't involve webkit.

Just leaving this here.

[CynthiaBlue]

Some of this stuff is very hard to understand! :) I am using jsPDF (why is one called PDFjs, and the other jsPDF? Surely they could have more unique names?). :) I need to build PDFs from data, so need more than just a viewer. I'm also using nodejs, but with electron. So far things are working well. Like you it took me a LONG TIME to figure out what worked.