問題描述

我正在嘗試制作一個 ionic 2 應用程序.我有一個使用 jsPDF 生成的 pdf.

I am trying to make an ionic 2 app. I have a pdf generated using jsPDF.

相同的代碼是

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

現在我想保存在移動應用中打開的 PDF，

Now I want to save the open the PDF in the mobile app,

但 doc.output('save', 'tester.pdf'); 似乎在移動應用程序中不起作用.

but doc.output('save', 'tester.pdf'); doesn't seem to work in the mobile app.

請告訴我可以安裝哪個插件來查看和分享新制作的pdf.

Please can you tell me which plugin can I install so as to view and share the newly made pdf.

推薦答案

必須使用 jsPDF創建 PDF.然后，必須使用 blob 屬性將其轉換為應用程序可以使用的格式，以便在將其放在屏幕上之前允許在應用程序中傳遞.

One has to use jsPDF to create a PDF. Then one has to use blob attribute to convert it to the format that can be used by the application to allow passing in the app before putting it on screen.

在 blob 步驟之后，必須安裝 ng2-pdf-viewer 在命令行上通過命令npm install ng2-pdf-viewer --save 并使用 在移動應用程序屏幕上查看.

After the blob step, One has to install ng2-pdf-viewer on the command line by the command npm install ng2-pdf-viewer --save and use the <pdf-viewer> to view it on the mobile app screen.

確保在 import 語句中的 app.module.ts 文件和 @NgModule.

Make sure you import the the ng-pdf-viewer in the app.module.ts file in the import statements and in the @NgModule.

這是相同的代碼，

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);

在簡歷視圖中

@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');
   }

}

這篇關于在 ionic 2 應用程序中打開 PDF 文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！