Skip to content

Commit

Permalink
experiment(PDFKit): demo table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Betree
Betree committed Dec 29, 2023
1 parent b99ac09 commit 05b9c15
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 0 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"next-transpile-modules": "9.1.0",
"node-fetch": "2.6.12",
"pdfkit": "0.14.0",
"pdfkit-table": "0.1.99",
"polished": "4.2.2",
"prop-types": "15.8.1",
"qr-image": "3.2.0",
Expand Down
144 changes: 144 additions & 0 deletions pages/api/test-table.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import PDFDocument from 'pdfkit-table';
import fs from 'fs';

// Unit: 1pt = 1/72 inch = 0.352777239 mm
const MARGIN_IN_PTS = 40; // The margin between the edge of the page and cards

Check failure on line 5 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'MARGIN_IN_PTS' is assigned a value but never used
const SPACING_IN_PTS = 35; // The spacing between cards

Check failure on line 6 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'SPACING_IN_PTS' is assigned a value but never used
const CARD_WIDTH_IN_PTS = 243;

Check failure on line 7 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'CARD_WIDTH_IN_PTS' is assigned a value but never used
const CARD_HEIGHT_IN_PTS = 153;

Check failure on line 8 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'CARD_HEIGHT_IN_PTS' is assigned a value but never used
const CARD_PADDING = 10;

Check failure on line 9 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'CARD_PADDING' is assigned a value but never used
const NB_CARDS_PER_PAGE = 8;

Check failure on line 10 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'NB_CARDS_PER_PAGE' is assigned a value but never used
const FONT_NORMAL = '.fonts/Inter-Regular.otf';
const FONT_BOLD = '.fonts/Inter-Bold.otf';

const OC_SVG_LOGO = fs.readFileSync('public/static/images/opencollective-icon.svg', 'utf8');

Check failure on line 14 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'OC_SVG_LOGO' is assigned a value but never used
const LINK_SVG = fs.readFileSync('public/static/images/external-link.svg', 'utf8');

Check failure on line 15 in pages/api/test-table.js

View workflow job for this annotation

GitHub Actions / lint 

'LINK_SVG' is assigned a value but never used

/**
* Generate a PDF using PDFKit and return it as a buffer.
*/
export default async function handler(req, res) {
// Set response headers
res.setHeader('Cache-Control', 'no-store');
res.setHeader('Content-Type', 'application/pdf');
// res.setHeader('Content-Disposition', 'attachment; filename="gift-cards.pdf"');

// Generate doc
const doc = new PDFDocument();
doc.pipe(res);
doc.fillColor('#000000').fontSize(10);
doc.font(FONT_NORMAL);

doc.table(
{
title: 'Payment Receipt',
headers: [
{ label: 'Date', align: 'left', headerColor: '#36bcff' },
{ label: 'Description', align: 'left', headerColor: '#36bcff' },
{ label: 'QTY', align: 'left', headerColor: '#36bcff' },
{ label: 'Unit Price', align: 'left', headerColor: '#36bcff' },
{ label: 'Tax', align: 'left', headerColor: '#36bcff' },
{ label: 'Net Amount', align: 'right', headerColor: '#36bcff' },
],
rows: [
['2020-01-01', 'Financial contribution to Dark Reader', '1', '$5.00', '0%', '$5.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-06-01', 'TShirt from Babel', '1', '$20.00', '0%', '$20.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
['2021-01-01', 'Financial contribution to Webpack', '1', '$15.00', '0%', '$15.00'],
],
},
{
columnsSize: [60, 150, 20, 100, 20, 100],
},
);

// Show Subtotal + Total on the bottom right of the table
// Subtotal
doc
.font(FONT_BOLD)
.fontSize(10)
.text('Subtotal', 350, doc.y, { lineBreak: false, align: 'right' })
.text('$5.00', 490, doc.y, { lineBreak: false, align: 'right' });

// Blue box for the total
doc
.rect(325, doc.y + 20, 200, 25)
.fillColor('#F0F8FF')
.fill();

// Total
doc
.font(FONT_BOLD)
.fontSize(10)
.fillColor('#000000')
.text('Total', 350, doc.y + 25, { lineBreak: false, align: 'right' })
.text('$5.00', 490, doc.y, { lineBreak: false, align: 'right' });

doc.end();
}

0 comments on commit 05b9c15

Please sign in to comment.