为什么从缓冲区创建的Uint8Array()返回为空？

huangapple
go评论118阅读模式
英文:

why does a Uint8Array() from buffer returns empty?

问题

我正在尝试加载一个字体供pdf-lib使用。为了使用它，我必须为pdfDoc.embedFont(font);提供一个Uint8Array。

出于某种原因，无论我何时创建Uint8Array，它都返回空的结果。ArrayBuffer 返回了一些内容，所以我感到相当困惑。我对JS还很陌生，如果这是一个愚蠢的问题，我深感抱歉。

  1. var request = new XMLHttpRequest();
  3. request.open("GET", "./resources/skill_positioning.json", false);
  4. request.send(null)
  5. const positionData = JSON.parse(request.responseText);
  7. async function createPdf() {
  8.     var fontkit = window.fontkit;
  9.     var pdflib = window.PDFLib;
  10.     const url = './resources/character_sheet_blank.pdf';
  11.     const existingPdfBytes = await fetch(url).then((res) =>
  12.         res.arrayBuffer(),
  13.     );
  15.     const pdfDoc = await pdflib.PDFDocument.load(existingPdfBytes)
  17.     pdfDoc.registerFontkit(fontkit);
  19.     const customFont = fetch('./resources/fonts/arialnb.ttf').then((response) => {
  20.         const buffer = response.arrayBuffer();
  21.         return new Uint8Array(buffer);
  22.     }).then((buffer) => {
  23.         return fontkit.create(buffer);
  24.     }).then((font) => {
  25.         return pdfDoc.embedFont(font);
  26.     }).then((customFont) => {
  27.         const pages = pdfDoc.getPages()
  28.         const firstPage = pages[0]
  29.         const { width, height } = firstPage.getSize()
  31.         var curRow = 1;
  32.         var curCollumn = 0;
  33.         firstPage.drawText('This text was added with JavaScript!', {
  34.             x: positionData.boxes[0].x,
  35.             y: height - (positionData.boxes[0].y + curRow * positionData.row_height),
  36.             size: 110,
  37.             font: customFont,
  38.             color: pdflib.rgb(0.0, 0.0, 0.0),
  39.         })
  40.         return pdfDoc;
  41.     }).then((pdfDoc) => {
  42.         const pdfBytes = pdfDoc.save();
  43.         download(pdfBytes, "character_sheet.pdf");
  44.     })
  45. }

我已经尝试在.then()之前和之后从数组缓冲区创建一个新的Uint8Array。

英文:

I am trying to load a font for pdf-lib to use. In order to use it, i must provide a Uint8Array for pdfDoc.embedFont(font);
For some reason, whenever i create the UInt8Array, it returns empty. The ArrayBuffer is returning something so i am quite confused. I am new to JS so my apologies if this is a dumb question.

  1. var request = new XMLHttpRequest();
  2. request.open("GET", "./resources/skill_positioning.json", false);
  3. request.send(null)
  4. const positionData = JSON.parse(request.responseText);
  5. async function createPdf() {
  6. var fontkit = window.fontkit;
  7. var pdflib = window.PDFLib;
  8. const url = './resources/character_sheet_blank.pdf';
  9. const existingPdfBytes = await fetch(url).then((res) =>
  10. res.arrayBuffer(),
  11. );
  12. const pdfDoc = await pdflib.PDFDocument.load(existingPdfBytes)
  13. pdfDoc.registerFontkit(fontkit);
  14. const customFont = fetch('./resources/fonts/arialnb.ttf').then((response) => {
  15. const buffer = response.arrayBuffer();
  16. return new Uint8Array(buffer);
  17. }).then((buffer) => {
  18. return fontkit.create(buffer);
  19. }).then((font) => {
  20. return pdfDoc.embedFont(font);
  21. }).then((customFont) => {
  22. const pages = pdfDoc.getPages()
  23. const firstPage = pages[0]
  24. const { width, height } = firstPage.getSize()
  25. var curRow = 1;
  26. var curCollumn = 0;
  27. firstPage.drawText('This text was added with JavaScript!', {
  28. x: positionData.boxes[0].x,
  29. y: height - (positionData.boxes[0].y + curRow * positionData.row_height),
  30. size: 110,
  31. font: customFont,
  32. color: pdflib.rgb(0.0, 0.0, 0.0),
  33. })
  34. return pdfDoc;
  35. }).then((pdfDoc) => {
  36. const pdfBytes = pdfDoc.save();
  37. download(pdfBytes, "character_sheet.pdf");
  38. })
  39. }

I have tried to create a new Uint8Array from the array buffer, before and after .then()

答案1

得分: 0

arrayBuffer() 返回一个Promise。因此，你应该这样写：

  1. fetch('./resources/fonts/arialnb.ttf').then((response) => {
  2.     return response.arrayBuffer();
  3. }).then((buffer) => {
  4.     return fontkit.create(buffer);
  5. })

将你的fetch调用结果分配给const customFont 是没有意义的，因为你链中的最后一个then块不返回任何内容。

另外，考虑使用async/await语法，它可以使Promise代码更加直观。实际上，在函数的前半部分已经在使用async/await了。为什么要回到then链呢？

  1. const response = await fetch('./resources/fonts/arialnb.ttf');
  2. const buffer = await response.arrayBuffer();
  3. const font = await fontkit.create(buffer);
  4. const customFont = await pdfDoc.embedFont(font);
  5. //... 继续使用customFont
英文:

arrayBuffer() returns a Promise. Therefore you should write

  1. fetch('./resources/fonts/arialnb.ttf').then((response) => {
  2.     return response.arrayBuffer();
  3. }).then((buffer) => {
  4.     return fontkit.create(buffer);
  5. })

Assigning the result of your fetch call to const customFont is meaningless because your last then block in the chain returns nothing.

Also consider using the async/await syntax which makes promise code more intuitive. In fact you are already using async/await in the first half of the function. Why switch back to then chain?

  1. const response = await fetch('./resources/fonts/arialnb.ttf');
  2. const buffer = await response.arrayBuffer();
  3. const font = await fontkit.create(buffer);
  4. const customFont = await pdfDoc.embedFont(font);
  5. //... continue to work with customFont

huangapple
  • 本文由 发表于 2023年6月19日 08:25:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76502988.html
  • arraybuffer
  • javascript
  • pdf-lib.js
  • uint8array
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定