Browser extension

[paritosh149]

I tried and found percollate a very useful tool. However, I would love to use it within html pages for on-demand creation of html page to pdf. How can I run percollate from within browser instead of node or command-line?

[danburzo]

I'd love it if someone could find a way to invoke percollate from the browser. It's sort of beyond the scope of this package, and I don't foresee an easy solution, but I'm keeping this open just in case someone wants a challenge :-)

[yashha]

Here would be a draft for a web api, feel free to fork https://github.com/yashha/percollate-api

[paritosh149]

Web Api would still be a server side solution which would require web connectivity.. how can percollate be used to generate pdf within an offline web app?

[jasonslyvia]

just start the web server on localhost, and make a simple browser extension or even just a bookmarklet to send a HTTP request to localhost will do the job

[paritosh149]

That surely cannot be an offline solution after all. There could be a way to run percollate within browser's javascript engine without HTTP. Let's explore.

[yashha]

You would need an alternative to puppeteer to run it fully offline on clientside. It creates currently the pdf from the parsed html.

[yashha]

Maybe this https://github.com/MrRio/jsPDF

[yashha]

This also supports links: https://github.com/eKoopmans/html2pdf

I made a bookmarklet draft. https://gist.github.com/yashha/8c3f7e34f5865bd77b326167fc281e79 I hope I have time in a week to improve it. And push it to github.

[yashha]

At the moment it is just this: Bundled with parcel.

// import jsPDF from 'jspdf';
// import PDFObject from 'pdfobject';
import Readability from './vendor/readability';
import html2pdf from 'html2pdf.js';

const savePage = () => {
    const article = new Readability(document).parse();
    const html = `<h1>${article.title}</h1> <br> ${article.content}`;

    // const doc = new jsPDF();
    // doc.fromHTML(html, 15, 15, {
    //     'width': 170
    // });
    //
    // if (typeof doc !== 'undefined') try {
    //     const string = doc.output('datauristring');
    //     PDFObject.embed(string, document.getElementById("preview-pane"));
    // } catch(e) {
    //     alert('Error ' + e);
    // }
    const opt = {
        margin:       0.4,
        filename:     article.title + '.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'a5', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(html).save();
};
savePage();

[yashha]

The disadvantage is that https://github.com/MrRio/jsPDF and https://github.com/eKoopmans/html2pdf don't render it so that the text is selectable/searchable.

[danburzo]

At the moment, from what I understand, a browser extension would be able to:

• Grab the URL of the current tab (or of all open tabs)
• Generate HTML and EPUB files out of these URLs
• From the HTML, on macOS/iOS/iPadOS, you can invoke the native "Print to PDF" feature.

So it sounds like it could be interesting to prototype as an universal browser extension that works on Firefox/Chrome/Safari/Edge.

[paritosh149]

1. Browser extension is installed and run based on user's approval and config, however, if a webapp needs to generate pdf / epub for a HTML, it must not rely on browser extension and initialize and run the utility within the webapp's scope.
2. Also, is it possible to generate pdf / epub from a DOM element as root and/or shadow DOM root element?