问题描述
目前我只是在 ionic 应用程序中显示 PDF 文件。我需要为 pdf 视图页面添加捏缩放功能。为此,我使用了如下包
- "@ionic-native/document-viewer": "^5.30.0"
- "cordova-plugin-document-viewer": "^1.0.0"
根据文档,此插件可以显示任何文件系统或文件夹中的 pdf 文件。由于我有 base64 中的数据,因此我转换为对象 URL 并尝试显示 pdf 文件。我收到以下错误:
这是我写的代码:
import { Component } from "@angular/core";
import { NavController,NavParams,ModalController } from "ionic-angular";
import { CertificateService } from "../../services/certificateService";
import { Holder } from "../../models/certificateModel";
import { CertificateSharePage } from "../certificate-share/certificate-share";
import {
DocumentViewer,DocumentViewerOptions,} from "@ionic-native/document-viewer/ngx";
@Component({
selector: "page-certificate-display",templateUrl: "certificate-display.html",})
export class CertificatedisplayPage {
selectedHolder: Holder = null;
showSpinner: boolean = false;
pdfSrc: any;
zoom: number = 1;
certificateNumber: string;
isCertificateExpiring: boolean;
isHistory: boolean = false;
constructor(
public navCtrl: NavController,private certificateService: CertificateService,public modalCtrl: ModalController,private params: NavParams,private document: DocumentViewer
) {
this.selectedHolder = params.get("holder");
this.certificateNumber = params.get("certificateNumber");
this.isCertificateExpiring = params.get("isCertificateExpiring");
this.isHistory = params.get("isHistory");
}
ionViewDidLoad() {
this.showSpinner = true;
if (!this.isHistory) this.displayPDF(this.selectedHolder);
else this.displayHistoryPDF(this.selectedHolder);
}
displayPDF(holder) {
const options: DocumentViewerOptions = {
title: "PDF File",};
this.certificateService
.downloadPDF(holder.cert_id,holder.user_sub,holder.id)
.subscribe(
(result) => {
this.showSpinner = false;
// this.pdfSrc = this.base64ToArrayBuffer(result.data); // old code which works but doesn't have pinch zoom functionality
const url = URL.createObjectURL(
this.b64tToBlob(result.data,"application/pdf")
);
this.document.viewDocument(url,"application/pdf",options);
},(error) => {
this.showSpinner = false;
console.log(error);
}
);
}
displayHistoryPDF(holder) {
this.certificateService
.downloadHistoryPDF(holder.id,holder.user_sub)
.subscribe(
(result) => {
this.showSpinner = false;
this.pdfSrc = this.base64ToArrayBuffer(result.data);
},(error) => {
this.showSpinner = false;
console.log(error);
}
);
}
back() {
this.navCtrl.pop();
}
share() {
let certificateShareModal = this.modalCtrl.create(CertificateSharePage,{
holder: this.selectedHolder,certificateNumber: this.certificateNumber,});
certificateShareModal.onDiddismiss((data) => {
// if(data)
// this.loadCertificate();
});
certificateShareModal.present();
}
base64ToArrayBuffer(base64) {
const binary_string = window.atob(base64);
const len = binary_string.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
b64tToBlob(b64Data,contentType) {
contentType = contentType || "";
var sliceSize = 512;
b64Data = b64Data.replace(/^[^,]+,/,"");
b64Data = b64Data.replace(/\s/g,"");
var byteCharacters = window.atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset,offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays,{ type: contentType });
return blob;
}
zoomIn() {
this.zoom += 0.25;
}
zoomOut() {
if (this.zoom > 1) {
this.zoom -= 0.25;
}
}
resetZoom() {
this.zoom = 1;
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)