pdfkit浏览器-“未捕获的ReferenceError:未定义fs"使用自定义字体时 [英] pdfkit Browser - "Uncaught ReferenceError: fs is not defined" when using custom fonts

问题描述

这个问题可能以前曾被问过，但没有答案.我尝试使用支持阿拉伯语言的pdfkit库创建pdf文件.因此，首先，我从此处.

This question may be asked previously but they have no answer. I try to create a pdf file using pdfkit library with Arabic language support. So, first I downloaded a prebuilt version of pdfkit (which is assumed to work in browser) from here.

然后，我写了这段代码来添加阿拉伯字体(例如 docs )

Then I wrote this code for adding an Arabic font (like in the 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

从第10949行开始的

pdfkit.js:

pdfkit.js from line 10949:

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

所以，我认为'fs'属于require('fs')的node.js部分，但无论如何我都不知道解决方案.那有什么解决办法呢?预先感谢！

So, I think 'fs' belongs to node.js part with require('fs') but anyway I don't know the solution. What is the solution then? Thanks in advance!

推荐答案

这是简单的解决方案；

Here is the simple solution;

1. 别忘了添加预构建的pdfkit.js和blob-stream.js文件
2. 复制以下js代码并将其包含在您的html中
3. 使用html/js将字体放到同一位置(例如trado.ttf)
4. 根据您的字体名称更改getFont(...)

1. Don't forget to add pre-built pdfkit.js and blob-stream.js files
2. Copy below js code and include it in your html
3. Put your fonts to the same place with html/js (like trado.ttf)
4. Change the getFont(...) according to your font name

完成！

重要说明:

1. 如果您在没有任何服务器的情况下运行它，则chrome将显示CORS策略错误. (请参阅此以仅尝试禁用)
2. 将文件移动到服务器上或在本地服务器上运行时，不会出现CORS错误.
3. 最后，最重要的是，给xhr.onload一些时间.因此，我们分别创建了writeToPDF()函数，以便在加载后与按钮一起使用.

1. If you run it without any server, chrome will give CORS policy error. (See this to disable just for try)
2. When you move your files to a server, or running in local server, there will be no CORS error.
3. Last and most importantly, give some times to xhr.onload. Because of that we create writeToPDF() function seperately for using with a button after loading.

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浏览器-“未捕获的ReferenceError:未定义fs"使用自定义字体时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！