Браузер pdfkit — Uncaught ReferenceError: fs не определяется при использовании пользовательских шрифтов

Этот вопрос может быть задан ранее, но у них нет ответа. Я пытаюсь создать файл 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

pdfkit.js из строки 10949:

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

Итак, я думаю, что «fs» принадлежит части node.js с require('fs'), но в любом случае я не знаю решения. Каково решение тогда? Заранее спасибо!


javascript pdf-generation arabic-support node-pdfkit
person ninbit    schedule 15.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот простое решение;

  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 -->

person ninbit    schedule 16.03.2019
comment
я пробовал это. и даже pdfkit.standalone.js. Я всегда получаю Uncaught ReferenceError: fs не определен - person chitgoks; 07.09.2019
comment
Вы отключили политику CORS в Chrome? Вы получаете какие-либо другие ошибки? - person ninbit; 11.09.2019