DEV Community: Chuongtran

A simple tool to visualize Go package

Chuongtran — Fri, 04 Dec 2020 02:35:42 +0000

Godepgraph - A simple tool to visualize Go package from https://pkg.go.dev

Demo at https://godepgraph.vercel.app

Components

Backend: Golang

Fiber
godepviz
bigcache
Deploy on Heroku

Frontend: Nuxt.js

Viz.js
vue-svg-pan-zoom
Host on Vercel

Improve performance generate pdf using puppeteer

Chuongtran — Sat, 13 Oct 2018 05:04:06 +0000

My first post about generating pdf using puppeteer at here.

At this post, I want to share about tip how to improve performance generate pdf.

We can use page.setContent to improve performance.

Using goto

console.time('launch')
const  browser  =  await  puppeteer.launch({
args: ['--no-sandbox'],
headless: true
});
console.timeEnd('launch');
console.time('newPage')
const  page  =  await  browser.newPage();
console.timeEnd('newPage')
console.time('goto')
await  page.goto(`data: text/html ,${finalHtml}`, {
waitUntil: 'networkidle0'
});
console.timeEnd('goto')
console.time('pdf')
await  page.pdf(options);
console.timeEnd('pdf')

Log

launch: 168.766ms
newPage: 87.764ms
goto: 1018.925ms
pdf: 109.687ms

Using setContent

console.time('launch')
const  browser  =  await  puppeteer.launch({
args: ['--no-sandbox'],
headless: true
});
console.timeEnd('launch');
console.time('newPage')
const  page  =  await  browser.newPage();
console.timeEnd('newPage')
console.time('setContent')
await  page.setContent(finalHtml);
console.timeEnd('setContent')
console.time('pdf')
await  page.pdf(options);
console.timeEnd('pdf')

Log

launch: 147.349ms
newPage: 89.669ms
setContent: 15.247ms
pdf: 161.551ms

Gotcha, setContent faster than goto

Thanks for your reading my post.

Generate simple PDF from HTML

Chuongtran — Thu, 04 Oct 2018 03:42:24 +0000

html_to_pdf

Generate simple PDF invoice from HTML using puppeteer & handlebars

Introduce

Puppeteer

Puppeteer is Node.js library giving you access to a headless Chrome browser. This makes it a breeze to generate PDF files with Node.js
Handlebars

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration

How to use

Run npm install to install package in package.json
Run node pdf.js to generate invoice.pdf

The PDF Invoice from HTML

Prepare content html (invoice.html)
Using handlebars to binding data to content html
Using Puppeteer to generate pdf from final html

const fs = require("fs");
const path = require("path");
const puppeteer = require('puppeteer');
const handlebars = require("handlebars");

(async () => {

    var dataBinding = {
        items: [{
                name: "item 1",
                price: 100
            },
            {
                name: "item 2",
                price: 200
            },
            {
                name: "item 3",
                price: 300
            }
        ],
        total: 600,
        isWatermark: false
    }

    var templateHtml = fs.readFileSync(path.join(process.cwd(), 'invoice.html'), 'utf8');
    var template = handlebars.compile(templateHtml);
    var finalHtml = template(dataBinding);
    var options = {
        format: 'A4',
        headerTemplate: "<p></p>",
        footerTemplate: "<p></p>",
        displayHeaderFooter: false,
        margin: {
            top: "40px",
            bottom: "100px"
        },
        printBackground: true,
        path: 'invoice.pdf'
    }

    const browser = await puppeteer.launch({
        args: ['--no-sandbox'],
        headless: true
    });
    const page = await browser.newPage();
    await page.goto(`data: text/html,${finalHtml}`, {
        waitUntil: 'networkidle0'
    });
    await page.pdf(options);
    await browser.close();
})();

How to display paid stamp watermark on the invoice?

Using handlebars to check param isWatermark

  {{#if isWatermark}}
    <div style="border-width: 6px;border-style: solid; border-color: #008000;border-radius: 8px; color: #008000; opacity:0.6; position: absolute; z-index: 1; left:40%; top:30%; font-size: 60pt;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg); font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;">
        PAID </div>
    {{/if}}

Change isWatermark: true and run node pdf.js again

You can find the source code at Github

Thank your time to read this post

PS:/ This is the first post on dev.to