PDFKit - 自定义字体 - fs.readFileSync不是一个函数

Question

我正在使用PDFKit作为应用程序。我只是在浏览器的HTML文件中使用它，使用Javascript（没有Node.js）。

我从GitHub下载了PDFKit：https://github.com/devongovett/pdfkit/releases

以及Blob Stream：https://github.com/devongovett/blob-stream

我试图按照文档包含自定义字体，如下所示：

doc.registerFont('Custom Font', 'fonts/GOODDP__.TTF');
doc.font('Custom Font').fontSize(fontSize).text($("#text1").val(), xPos, yPos, configObj);

但我总是得到这个错误：

 fs.readFileSync is not a function

这是有道理的，因为fs.readFileSync是node.js的一部分，我没有使用它。但是，文档中的示例说这可以在浏览器中使用。

我知道还有一个Browserify选项，但我不确定在这种情况下如何或如果有帮助

Answer 1

你必须使用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);

Answer 2

您似乎必须使用Browserify来实现此功能，并且使用预编译的PDFKit.js不会为任何Node.js特定功能削减它。

Answer 3

这是我加载自定义unicode字体所遵循的步骤。

使用默认值创建package.json：

npm init -y

安装fontkit

npm install fontkit

全局安装browserify（如果您没有browserify）

npm install -g browserify

创建一个空文件并将其命名为compile.js（或任何你喜欢的）
将以下代码粘贴到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"); }); }); 要加载不同的字体，只需更改fontName值即可。上面的代码假定名为OpenSans-Regular.ttf的字体文件与compile.js位于同一目录中。您可以将fontPath更改为您喜欢的任何路径或URL。
运行以下命令（在终端或命令提示符下）以创建fontkit的自定义版本。

browserify compile.js -o fontkit.js

您可以删除compile.js文件。它不再需要了。您还可以删除node_modules目录以及package.json。（如果您没有使用其他软件包，而您只是为了创建自定义版本的fontkit而这样做）
创建一个index.html文件并粘贴以下内容： <!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>
这是浏览器中index.html的屏幕截图：

Answer 4

我也遇到了这个问题，Andrea的答案只是解决方案的一部分。您实际上需要调整pdfkit.js文件。但首先你需要做Andrea所做的事：

var myImage;
var oReq = new XMLHttpRequest();
oReq.open("GET", "myimage.jpg", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) 
{
    myImage = oReq.response; //image as an arraybuffer
    makePDF();
};
oReq.send(null)

//then use myImage like normal:
doc.image(myImage);

正如我所说，你需要调整pdfkit.js文件。在第2888行：

PDFImage.open = function(src, label) {
    var data, match;
    if (Buffer.isBuffer(src)) {
        data = src;
    } else {
        //START NEW
        if (src instanceof ArrayBuffer) {
            data = new Buffer(new Uint8Array(src), 'object');
        } else
        //END NEW
        if (match = /^data:.+;base64,(.*)$/.exec(src)) {
            data = new Buffer(match[1], 'base64');
        } else {
            data = fs.readFileSync(src);
            if (!data) {
                return;
            }
        }
    }

确保您还包含blob-stream.js。我在// START NEW之后添加了一个额外的选项来处理来自XMLHttpRequests的数组缓冲区。

我不知道这是否是最佳解决方案，但它确实有效。

PDFKit - 自定义字体 - fs.readFileSync不是一个函数

问题描述投票：6回答：4

4个回答

最新问题

PDFKit - 自定义字体 - fs.readFileSync不是一个函数

问题描述 投票：6回答：4

4个回答

最新问题

问题描述投票：6回答：4