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

Question

我正在尝试制作一个 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

Answer 1

必须使用 jsPDF 才能创建 PDF。然后必须使用 blob 属性将其转换为应用程序可以使用的格式，以允许在将应用程序显示在屏幕上之前将其传入。

在blob步骤之后，必须通过命令在命令行上安装ng2-pdf-viewer npm install ng2-pdf-viewer --save 并使用 <pdf-viewer> 在移动应用程序屏幕上查看。

确保在导入语句中的 app.module.ts 文件和 @NgModule.[=18= 中导入 ng-pdf-viewer ]

这是相同的代码，

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);
var blob = doc.output('blob', {type: 'application/pdf'});
let pdfUrl = {pdfUrl: URL.createObjectURL(blob)};
let modal = this.navCtrl.push(ResumeView, pdfUrl);

在 ResumeView 中

@Component({
  selector: 'page-resume-view',
  templateUrl: '<ion-content padding text-center>
                   <pdf-viewer [src]="pdfUrl" 
                               [page]="page" 
                               [original-size]="false"
                               style="display: block;">

                    </pdf-viewer>
                </ion-content>',
})
export class ResumeView {
  pdfUrl : String;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ResumeView');
    this.pdfUrl = this.navParams.get('pdfUrl');
   }

}

Answer 2

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

1-安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save

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

2- 您可以安装 jspdf 模块

而不是通过外部 url 包含 jspdf.debug.‌ js

npm install jspdf --save

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

在离子项目的根目录中创建脚本文件夹，并在脚本文件夹中创建一个名为 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"
  }

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

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

4-最后可以写出如下代码：

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

希望对您有所帮助，谢谢:)

Answer 3

很简单

步骤：1) 安装 pdf-viewer 插件：

     npm install ng2-pdf-viewer --save

步骤:2) 在你的 app.module.ts:

   import { PdfViewerComponent } from 'ng2-pdf-viewer';

   @NgModule({
           declarations: [
              PdfViewerComponent,
            ],

步骤:3)在app.component.ts:

      import { PdfViewerComponent } from 'ng2-pdf-viewer';

步骤:4) 在你的页面 html 文件:

 <ion-content>
 <pdf-viewer [src]="'YOUR_PDF_FILE_PATH'" [page]="page" [original-size]="false" style="display:block;"> </pdf-viewer>
 </ion-content>

Answer 4

安装插件：

ionic cordova plugin add cordova-plugin-file-opener2
npm install --save @ionic-native/file-opener


this.fileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

参考：link

Answer 5

你可以试试这个：

在组件部分：

    import { DomSanitizer} from '@angular/platform-browser';
    url :any;

    constructor(private sanitizer: DomSanitizer) { }
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.amu.ac.in/pdf/FreeResources.pdf');

在HTML部分：

<iframe  [src]="url" width="100%" height="100%" frameborder="0" ></iframe>

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

Opening PDF file in ionic 2 app

javascript

angularjs

jspdf

cordova-plugins

ionic2