javascript - 在 ionic 2 应用程序中打开 PDF 文件

标签 javascript angularjs ionic2 cordova-plugins jspdf

我正在尝试制作一个 ionic 2 应用程序。我有一个使用 jsPDF 生成的 pdf。

同样的代码是

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);

现在我想保存在移动应用程序中打开的 PDF,

但是 doc.output('save', 'tester.pdf'); 似乎在移动应用程序中不起作用。

请问我可以安装哪个插件来查看和分享新制作的pdf。

最佳答案

我认为通过外部 URL 包含脚本在 ionic 中可能不是一个好的选择。还有一种方法如下:

1-安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save 

并在您的 app.moudle.ts 中导入 PdfViewerComponent,如下所示:

enter image description here

2- 您可以安装 jspdf 模块,而不是通过外部 url 包含 jspdf.debug.‌ js

npm install jspdf --save

3- 实现 ionic 复制自定义脚本

在 ionic 项目的根目录中创建脚本文件夹,并在脚本文件夹中创建一个名为 copy-custom-libs.js 的文件。

module.exports = {
  copyCustomScript: {
    src: ["{{ROOT}}/node_modules/jspdf/dist/jspdf.min.js"],
    dest: "{{WWW}}/assets"
  }
} 

在 package.json 中,在底部添加配置属性,如下所示:

 "config": {
      "ionic_copy": "./scripts/copy-custom-libs.js"
  } 

enter image description here

更新 index.html 并从您的 Assets 文件夹中添加 jspdf.min.js。

<script src="assets/jspdf.min.js"></script> 

enter image description here

4-最后,您可以编写如下代码:

enter image description here

enter image description here

enter image description here

此示例的源代码可在此处找到:ionic pdf viewer

希望对你有帮助,谢谢:)

关于javascript - 在 ionic 2 应用程序中打开 PDF 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43730612/

相关文章:

json - 如何使用 ng-repeat 显示来自 json 的数据

javascript - ng-options 按另一个下拉列表中的值过滤数据

javascript - 当我进入另一个 ionic 状态时,数据不显示

javascript - D3 : Why doesn't the heatmap color legend appear?

javascript - Socket.io 响应 : How to get server to respond to multiple clients upon receiving info from all clients?

javascript - AJAX POST 请求在 POSTMAN 中有效,但在 Chrome 中无效

javascript - 将样式值设置为 Javascript 变量

angularjs - 隔离作用域绑定(bind)类型

node.js - 错误:property 'token' does not exist on type' () => any'

javascript - Ionic 2 - *ng用于值之间的随机洗牌