【问题标题】:Opening PDF file in ionic 2 app在 ionic 2 应用程序中打开 PDF 文件
【发布时间】:2019-01-24 17:38:51
【问题描述】:

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

【问题讨论】:

  • 最好的方法是下载并在默认的 pdf 查看器中查看。我做得很好。

标签: javascript angularjs ionic2 cordova-plugins jspdf


【解决方案1】:

我认为通过外部 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- 实现离子拷贝自定义脚本

在您的 ionic 项目的根目录中创建脚本文件夹,并在脚本文件夹中创建一个文件名 copy-custom-libs.js。

module.exports = {
  copyCustomScript: {
    src: ["{{ROOT}}/node_modules/jspdf/dist/jspdf.min.js"],
    dest: "{{WWW}}/assets"
  }
} 

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

 "config": {
      "ionic_copy": "./scripts/copy-custom-libs.js"
  } 

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

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

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

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

希望对你有帮助,谢谢:)

【讨论】:

  • 详细的好指南
  • ionic_copy 是如何从 json 自动执行的?
【解决方案2】:

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

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

确保在 import 语句的 app.module.ts 文件和 @NgModule.

中导入 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);

在简历视图中

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

}

【讨论】:

  • 我认为你应该使用“template”而不是使用templateUrl。
  • @Mayur , @Mankeomorakort 我已经通过“npm install jspdf”安装了 jspdf。然后我在 index.html 中包含了`"script src="cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js""/script"`,之后当我声明"var doc = new jspdf()"时,它给了我找不到 jspdf 的错误。我正在工作关于 Ionic 2 项目你知道如何解决这个问题吗?
  • 我无法滚动
【解决方案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>

【讨论】:

  • 当我尝试它时,只在 android 上有效,在 ios 上无效。你也一样吗?
  • 安装这个版本 npm install ng2-pdf-viewer@4.1.1 再试一次
【解决方案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

【讨论】:

  • 它尝试使用包名为 de.sitewaerts.cleverdox.viewer 的应用程序打开 pdf 文件,我们希望在应用程序内部而不是在任何其他第三方应用程序上打开。
  • 是的,你是对的,再次检查答案。这很好用
  • 我们可以从服务器提供 path/to/file.pdf 作为 url 吗?
【解决方案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>

【讨论】:

  • 它不能在 iphone 设备上工作,但只能在 android 设备上工作?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多