javascript - 将 jsPDF 与 Electron 结合使用-6ren

javascript - 将 jsPDF 与 Electron 结合使用

转载作者：行者123 更新时间：2023-12-03 04:00:56

26

4

我正在尝试在我的 Electron 应用程序中创建生成 pdf 文档。当用户选择一个 JSON 文件时，我想解析它并创建新的 PDF 文档。我在尝试创建文档时遇到错误。

错误

Uncaught Error: Type of text must be string or Array. "undefined" is not recognized.
    at Object.H.text (/Users/antarrbyrd/dev/pathway_exporter/bower_components/jspdf/dist/jspdf.min.js:1)
    at HTMLInputElement.<anonymous> (index.html:48)
    at HTMLInputElement.dispatch (/Users/antarrbyrd/dev/pathway_exporter/lib/jquery.min.js:3)
    at HTMLInputElement.q.handle (/Users/antarrbyrd/dev/pathway_exporter/lib/jquery.min.js:3)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link href="./bower_components/photon/dist/css/photon.min.css" rel="stylesheet" type="text/css" />
    <title>Seremedi - Pathway Exporter</title>
  </head>
  <body>
    <div class="window">
      <header class="toolbar toolbar-header">
        <div class="btn-group">
          <button class="btn btn-large btn-default" id="open-button">
            <span class="icon icon-folder"></span>
          </button>
          <button class="active btn btn-large btn-default">
            <span class="icon icon-download"></span>
          </button>
          <button class="active btn btn-large btn-default">
            <span class="icon icon-print"></span>
          </button>
        </div>
        <input type="file" id="file-input" style="display: none;"></input>
      </header>
      <div class="window-content">
        <webview id="webview" autosize style="display:inline-flex; width:100%; height:100%"></webview>
      </div>
      <footer class="toolbar toolbar-footer">
        <h1 class="title">&copy; Seremedi - 2017</h1>
      </footer>
    </div>
  </body>
  <script>
    $ = require('jquery')
    jsPDF = require('jspdf')
    PDFDocument = require('pdfkit')

    $('#open-button').on('click',function(evt){
      evt.preventDefault();
      $('#file-input').click();
    });
    $('#file-input').on('change',function(evt){
      var location = $('#file-input')[0].files[0].path;
      source = "";
      $('#webview').prop('src', location);
      $.getJSON(location, function(json){
        source = json;
        console.log(source);
      });
      var doc = new jsPDF();
      doc.text(source.ReferenceId, 10, 10);
      doc.save('file.pdf');
    });
  </script>
</html>

最佳答案

Javascript 是异步的。 jsPDF 行只是在 $.getJSON() 完成之前执行。此时 source 只是一个空字符串。因此 source.ReferenceId 未定义。

$.getJSON(location, function(json){
    source = json;
    var doc = new jsPDF();
    doc.text(source.ReferenceId, 10, 10);
    doc.save('file.pdf');
});

关于javascript - 将 jsPDF 与 Electron 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44726698/

26

4

0

文章推荐： javascript - 使用 ember-cp-validations 验证可选电子邮件

文章推荐： javascript - 使用 JavaScript 将 CSV 转换为特定格式？

jspdf - 如何使用 jspdf、jspdf-autotable 适应宽表
我正在使用带有插件 jspdf-autotable 的 jspdf 来为一个非常宽的表格创建一个 pdf，有没有办法让表格/列数据自动适应任何页面大小？我尝试了下面的代码溢出:'linebreak'
jspdf - jspdf autotable中每列的宽度不同？
我的表有 13 列。如何为每列获得不同的宽度？我可以像这样给每个列宽吗？样式:{溢出:'换行符'，列宽:[100,80,80,70,80,80,70,70,70,70,60,80,100]}，我的
jspdf - 使用 jspdf 和 jspdf-autotable 在 pdf 中嵌套表格
如何使用jspdf和jspadf-autotable在PDF中实现嵌套表格？类似于下图的内容: 最佳答案 jspdf-autotable 中不支持嵌套表格，但您可以使用 didDrawCell Hoo
jspdf - 如何删除 jsPDF 中的单元格填充？
在 jsPDF 中使用 .cell 时如何删除填充？我到处都看了，文档很模糊 this.pdf = new jsPDF(); this.pdf.cell(0, 0, 10, 10, "cell ce
jspdf - 如何制作 jspdf 自动表格？
表格插件 JsPDF-AutoTable: https://github.com/simonbengtsson/jsPDF-AutoTable 如何使页面横向与纵向相反？在文档中，它只是说“仅支持 p
jspdf - 如何在 JsPDF 中添加超链接？
是否可以添加 HyperLink在 jsPDF ? 这是我用于相同的代码。 var doc = new jsPDF('p', 'pt'); doc.fromHTML( 'Cl
jspdf - 在表格前后添加内容(jsPDF autotable)
我对 jsPDF autotable 有疑问。我的代码: $('#printBtn').on('click', function() { var pdf = new jsPDF('p
jspdf - 如何使用 jspdf/autotable 在最后一页显示表页脚？
我有自动表的问题。我的表由 thead、tbody 和 tfoot 组成。我的脚是我在每一列上的总值(value)。我能够生成 pdf，但 tfoot 或总页脚不断打印在每一页上。我在检查文档时使用
jspdf-autotable - jspdf-autotable 插件的自定义字体
有人可以帮忙举一个为 jspdf-autotable 设置自定义字体的例子吗？我尝试了以下 var doc = new jsPDF('p', 'pt'); doc.setFont("rotobo")
jspdf - 如何使用 jsPDF 获取 PDF 中的表格行图像？
我有一个带图像的 html 表。当我尝试转换为 PDF 时，只有数据来了。图像未以 PDF 格式显示。如何获取pdf格式的表格td图片？契约(Contract)标题包含复选框图像。但不是以 pdf
jspdf - 生成的 PDF 中的自动换行(使用 jsPDF)？
我正在做的是使用 jsPDF 创建我生成的图形的 PDF。但是，我不确定如何包装标题(使用 text() 函数添加)。标题的长度因图形而异。目前，我的标题正在页面外运行。任何帮助，将不胜感激! 这是我
javascript - jsPDF && jsPDF AutoTable 将特殊字符打印到 PDF
我正在使用img jsPDF AutoTable库从我的HTML表创建PDF文件，Everythink工作正常，PDF总是创建，但我对我的国家/地区典型的一些特殊字符有疑问。在我的 PDF 文件中，包
jspdf - 如何使用 JsPDF-autoTable 在每个页面的顶部添加 Logo ？
JsPdf-autoTable是一款非常棒的软件，并且非常简单就能让基础功能发挥作用。现在我想在每个页面的顶部添加一个 Logo 和一些文本，并在每个页面上添加一个 page X of Y 页脚，但
javascript - jsPDF 总是在控制台上返回 jsPDF PubSub 错误
我有一个用于保存 html 页面的按钮。当用户单击按钮时，我想触发 jsPDF 函数，但它返回“jspdf PubSub 错误”并且生成的 pdf 文件为空白。 var doc = new jsPD
jspdf - 如何为 jsPDF 应用颜色、表格 CSS 等样式？
我是使用 jsPDF 的新手，能够很好地生成普通 PDF，但是当我尝试应用外部 CSS 或普通样式背景颜色时，它没有任何效果。我的 JSP 包括: 我正在使用下
jspdf - putTotalPages 在 jspdf-autotable header 中不起作用
我正在尝试将“页码 x of y”添加到使用 jspdf 和 jspdf-autotable 生成的 PDF 中。我使用了 jspdf-autotable 示例网站上的 Examples.js 文件中
javascript - jsPDF/jsPDF-autotable 将 dom 元素打印到表格中
我正在使用jspdf和jspdf-autotable将基于数据的表格导出为PDF。有时，我的数据可能包含 DOM 元素，这些元素不由 jspdf-autotable 插件处理。在大多数情况下，DOM
jspdf - 在 jspdf autotable 插件中访问嵌套的 JSON 属性
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？我们有一个
jspdf - 在 jspdf autotable 插件中访问嵌套的 JSON 属性
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？我们有一个
javascript - JsPdf autotable 中单元格内的粗体和普通文本样式(如何使用 jsautotable jspdf 使用粗体和普通文本)
我使用 Array.prototype.push() 创建了一个包含来自动态表的值的数组.然后像这样把它转换成pdf doc.autoTable(vHeader, vData, opt); doc.s

首页

博学

6Ren·AI

商城

javascript - 将 jsPDF 与 Electron 结合使用

错误

index.html