pdfkit Browser - «Uncaught ReferenceError: fs не определено» при использовании пользовательских шрифтов - PullRequest
Новая
       32

pdfkit Browser - «Uncaught ReferenceError: fs не определено» при использовании пользовательских шрифтов

0 голосов
/ 15 марта 2019

Этот вопрос может быть задан ранее, но у них нет ответа.Я пытаюсь создать PDF-файл, используя библиотеку pdfkit с поддержкой арабского языка.Итак, сначала я скачал предварительно собранную версию 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'), но в любом случае я не знаю решения.Каково решение тогда?Заранее спасибо!

1 Ответ

0 голосов
/ 17 марта 2019

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

  1. Не забудьте добавить предварительно созданные файлы pdfkit.js и blob-stream.js
  2. Скопируйте код ниже js и включите егов вашем html
  3. Поместите ваши шрифты в то же место с помощью html / js (например, trado.ttf)
  4. Измените getFont(...) в соответствии с вашим именем шрифта

Готово!

Важные замечания:

  1. Если вы запустите его без какого-либо сервера, Chrome выдаст ошибку политики CORS.(См. this , чтобы отключить только для попытки)
  2. При перемещении файлов на сервер или при запуске на локальном сервере ошибки CORS не будет.
  3. Lastи самое главное, дать несколько раз 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 -->
...