Depending how you intend to use the library, there are different ways to import it. While it is straight forward to import SwissQRBill, it may be a bit more complicated to import PDFKit, which is used to create the PDF itself.
Each example below is available as a StackBlitz project.
Importing the library in Node.js using ES modules is straight forward. You can use the following import statement:
// PDFKit
import PDFDocument from "pdfkit";
// PDF
import { SwissQRBill } from "swissqrbill/pdf";
// SVG
import { SwissQRBill } from "swissqrbill/svg";
SwissQRBill provides a CommonJS module for legacy Node.js applications. You can require the library as follows:
// PDFKit
const PDFDocument = require("pdfkit");
// PDF
const { SwissQRBill } = require("swissqrbill/pdf");
// SVG
const { SwissQRBill } = require("swissqrbill/svg");
Warning
This demo on StackBlitz does only work in Chrome. If you want to try it in another browser, you need to download the project and run it locally.
As PDFKit internally relies on several different built in modules of Node.js, it is not possible to use it directly in the browser. Instead, you need to bundle those node dependencies with a tool like webpack. More information can be found in the PDFKit repository
Warning
This demo on StackBlitz does only work in Chrome. If you want to try it in another browser, you need to download the project and run it locally.
PDFKit provides a pre-built bundle that can be used directly in the browser. Similarly SwissQRBill also provides a pre-built bundle. It can be imported from the JSDelivr CDN as follows:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pdfkit@0/js/pdfkit.standalone.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/blob-stream@latest/+esm"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/swissqrbill@latest/lib/bundle/swissqrbill.js"></script>
The bundle exposes all exports in the global variable SwissQRBill
.
const SwissQRBill = {
errors,
PDF,
SVG,
table,
types,
utils
};