在ionic 2 app中打开PDF文件

May*_*ani 1 javascript angularjs jspdf cordova-plugins ionic2

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

相同的代码是

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);
Run Code Online (Sandbox Code Playgroud)

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

doc.output('save', 'tester.pdf');似乎不适用于移动应用程序.

请问您能告诉我哪个插件可以安装,以便查看和分享新制作的PDF格式.

Man*_*ort 10

我认为通过外部URL包含脚本可能不是一个很好的选择离子.还有另一种方式如下:

1 - 安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save 
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

2-而不是通过extenal url包含jspdf.debug.js,你可以安装jspdf模块

npm install jspdf --save
Run Code Online (Sandbox Code Playgroud)

3-实施离子复制自定义脚本

在离子项目的根目录中创建脚本文件夹,并在脚本文件夹中创建文件名copy-custom-libs.js.

module.exports = {
  copyCustomScript: {
    src: ["{{ROOT}}/node_modules/jspdf/dist/jspdf.min.js"],
    dest: "{{WWW}}/assets"
  }
} 
Run Code Online (Sandbox Code Playgroud)

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

 "config": {
      "ionic_copy": "./scripts/copy-custom-libs.js"
  } 
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

更新index.html并从assets文件夹中添加jspdf.min.js.

<script src="assets/jspdf.min.js"></script> 
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

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

在此输入图像描述

在此输入图像描述

在此输入图像描述

这个例子的源代码可以在这里找到:ionic pdf viewer

我希望这可以帮助你,谢谢:)