0

这个问题可能以前被问过，但他们没有答案。我尝试使用pdfkit支持阿拉伯语的库创建一个 pdf 文件。所以，首先我从这里下载了 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

pdfkit.js 从第 10949 行开始：

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

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

4

1 回答 1

0

这是简单的解决方案；

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

完毕！

重要笔记：

  1. 如果你在没有任何服务器的情况下运行它，chrome 会给出 CORS 策略错误。（见此禁用只是为了尝试）
  2. 当您将文件移动到服务器或在本地服务器中运行时，不会出现 CORS 错误。
  3. 最后也是最重要的，给一些时间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 -->

于 2019-03-16T21:38:03.020 回答