pdfkit Browser - "Uncaught ReferenceError: fs is not defined" when using custom fonts

Question

以前可能有人问过这个问题，但他们没有答案。我尝试使用支持阿拉伯语的 pdfkit 库创建一个 pdf 文件。所以，首先我从 here.

下载了一个预构建版本的 pdfkit（假定它可以在浏览器中工作）

然后我写了这段代码来添加阿拉伯语字体（如 docs）

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

pdfkit.js 来自第 10949 行：

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

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

Answer 1

这是简单的解决方案；

不要忘记添加预建 pdfkit.js 和 blob-stream.js 文件
复制下面的 js 代码并将其包含在您的 html
将你的字体放在与 html/js 相同的位置（如 trado.ttf）
根据你的字体名称更改getFont(...)

完成！

重要提示：

如果你运行它没有任何服务器，chrome 将给出 CORS 策略错误。（见 this 禁用只是为了尝试）
当您将文件移动到服务器或运行在本地服务器中时，不会出现 CORS 错误。
最后也是最重要的，给xhr.onload一些时间。因此，我们单独创建 writeToPDF() 函数，以便在加载后与按钮一起使用。

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

pdfkit Browser - "Uncaught ReferenceError: fs is not defined" when using custom fonts

javascript

pdf-generation

node-pdfkit

arabic-support