在ionic 2 app中打开PDF文件 [英] Opening PDF file in ionic 2 app

问题描述

我正在尝试创建一个离子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步骤之后，One必须安装 ng2-pdf-viewer 命令行
npm install ng2-pdf-viewer --save 并使用< pdf-viewer> 可在移动应用屏幕上查看。

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.

确保在导入语句和<$中的 app.module.ts 文件中导入ng-pdf-viewer c $ c> @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);

ResumeView中的

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

}

这篇关于在ionic 2 app中打开PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！