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

2022-01-13 00:00:00 angularjs javascript ionic2 jspdf cordova-plugins

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

}

相关文章