I'm using PDFKit for an application. I'm just using it in the Browser in an HTML file, with Javascript (no Node.js).
I downloaded PDFKit from GitHub: https://github.com/devongovett/pdfkit/releases
as well as Blob Stream: https://github.com/devongovett/blob-stream
I'm trying to include a custom font per the documentation like so:
doc.registerFont('Custom Font', 'fonts/GOODDP__.TTF');
doc.font('Custom Font').fontSize(fontSize).text($("#text1").val(), xPos, yPos, configObj);
But I always get this error:
fs.readFileSync is not a function
This makes sense because fs.readFileSync
is part of node.js, and I'm not using that. However, the example in the docs say this can be used in the browser.
I know there's also a Browserify option, but I'm not sure how or if that would help in this situation
You have to use an ArrayBuffer:
var oReq = new XMLHttpRequest();
oReq.open("GET", "css/fonts/Open_Sans/OpenSans-Regular.ttf", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if (arrayBuffer) {
PdfExporter.doc.registerFont('OpenSans', arrayBuffer)
}
};
oReq.send(null);
It seems you must use Browserify for this functionality and that using a pre-compiled PDFKit.js won't cut it for any of the Node.js-specific functionality.
Here's the steps I followed to load a custom unicode font.
npm init -y
npm install fontkit
npm install -g browserify
Create an empty file and name it compile.js (or whatever you like)
Paste the following code inside compile.js
fontkit = require("fontkit");
const fontName = "OpenSans-Regular";
const fontPath = fontName + ".ttf";
fetch(fontPath)
.then(res => res.arrayBuffer())
.then(fontBlob => {
const customFont = fontkit.create(new Buffer(fontBlob)).stream.buffer;
const doc = new PDFDocument({});
const stream = doc.pipe(blobStream());
doc.registerFont(fontName, customFont);
doc.fontSize(14);
doc.font(fontName)
.fillColor("black")
.text(
"Custom unicode font loaded. Ω is the 24th and last letter of the Greek alphabet.",
50,
50,
{ width: 800, align: "left" }
);
doc.end();
stream.on("finish", function() {
const blob = stream.toBlob("application/pdf");
const iframe = document.querySelector("iframe");
iframe.src = stream.toBlobURL("application/pdf");
});
});
To load a diffrent font simply change the fontName value. The above code assumes that a font file named OpenSans-Regular.ttf is present in the same directory as compile.js. You can change the fontPath to whatever path or URL you like.
Run the following (in your Terminal or command prompt) to create a custom version of fontkit.
browserify compile.js -o fontkit.js
You can delete compile.js file. It's no longer needed. You can also delete node_modules directory as well as package.json. (If you are not using other packages and you are only doing this for creating a custom version of fontkit)
Create an index.html file and paste the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Font</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe id="frame1" width="100%" height="500px"></iframe>
</body>
<script src="pdfkit.js"></script>
<script src="blob-stream.js"></script>
<script src="fontkit.js"></script>
</html>
Here's a screenshot of index.html in the browser:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With