pdfkit浏览器 - “未捕获的ReferenceError：未定义FS”使用自定义字体时(pdf

这个问题可以事先询问，但他们没有答案。 我尝试创建使用PDF文件pdfkit库与阿拉伯语言支持。 所以，首先我下载pdfkit的预建版本（假设在浏览器中运行）来自这里 。

然后，我写了这个代码（在例如加入阿拉伯字体的文档 ）

const doc = new PDFDocument;
var text_arabic = "مرحبا مَرْحَبًا";

// Using a TrueType font (.ttf)   
doc.font('./trado.ttf')   // --> this line gives the error.
   .text(text_arabic)
   .moveDown(0.5);

错误是：

Uncaught ReferenceError: fs is not defined
at Object.fontkit.openSync (pdfkit.js:10949)
at Function.PDFFont.open (pdfkit.js:451)
at PDFDocument.font (pdfkit.js:2227)
at main.js:22

从线10949 pdfkit.js：

fontkit.openSync = function (filename, postscriptName) {
   var buffer = fs.readFileSync(filename);    / --> error
   return fontkit.create(buffer, postscriptName);
};

所以，我认为“FS”所属的Node.js与部分require('fs')但无论如何，我不知道解决的办法。 什么是那么的解决方案？ 提前致谢！

Answer 1:

这里是简单的解决方案;

1. 不要忘了补充预建pdfkit.js和BLOB，stream.js文件
2. 复制下面的js代码，并将其包含在HTML
3. 把你的字体与HTML / JS（如trado.ttf）相同的地方
4. 更改getFont(...)根据您的字体名称

完成！

重要笔记：

1. 如果不带任何服务器上运行它，铬会给CORS政策错误。 （请参阅此禁用只是尝试）
2. 当你将文件服务器，或者在本地服务器上运行，不会有CORS错误。
3. 最后，最重要的是，给一些次xhr.onload 。 正因为如此，我们创建writeToPDF() seperately功能与加载后的按钮使用。

 const doc = new PDFDocument; const stream = doc.pipe(blobStream()); var embeddedFonts = (function() { var fontCollection = {}; function getFont(name, src) { var xhr = new XMLHttpRequest(); xhr.open('GET', src, true); xhr.responseType = "arraybuffer"; xhr.onload = function(evt) { var arrayBuffer = xhr.response; if (arrayBuffer) { fontCollection[name] = new Uint8Array(arrayBuffer); registerEmbeddedFonts(doc, embeddedFonts); } else { error = "Error downloading font resource from " + src; } }; xhr.send(null); } getFont("Trado", 'trado.ttf'); return fontCollection; }()); function registerEmbeddedFonts(doc, fontCollection) { doc.registerFont("Trado", fontCollection["Trado"]); } function writeToPDF() { doc.fontSize(40); doc.font('Trado').text('مَرْحَبًا'); doc.end(); stream.on('finish', function() { // get a blob you can do whatever you like with const blob = stream.toBlob('application/pdf'); // or get a blob URL for display in the browser const url = stream.toBlobURL('application/pdf'); var frame = document.getElementById("pdfFrame"); frame.src = url; }); } 

 <script src="https://github.com/foliojs/pdfkit/releases/download/v0.8.0/pdfkit.js"></script> <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script> <iframe id="pdfFrame" src="" width="300" height="300"> </iframe> <button type="button" onclick="writeToPDF();">Write to PDF</button> <!-- This example doesn't work because of missing trado.ttf font file. Try to run at your PC --> 

文章来源: pdfkit Browser - “Uncaught ReferenceError: fs is not defined” when using custom fonts