需求：做項目聯調接口時，發現知識庫展示pdf未果，經與后端人員溝通，發現以下問題：
1.接口返回的是utf-8數據流，但是前端調用的是base64解析方法；
導致功能有誤；
方案一：將后端返回的utf-8數據流改為經base64解析的數據流。 ========新思路：嘗試緩加載，但是未能實現。
測試結果：安卓系統可以正常使用，但是ios當時存在閃退的問題，且base64若處理一個2M的文件，解析后體積將近為4M，對小文件還是用，大文件很容易造成系統運行內存不夠，跳出App。
方案二：用iframe靜態展示base64文件流。
測試結果：ios可正常使用，但是安卓系統對iframe存在兼容性問題。
<iframe ng-src="{{pdfPath}}" style="width:100%；height：800px;"> </iframe>
方案三：將后端數據流退回到utf-8,修改解析后端返回數據流的方法。------解決問題。
1 <div style="width: 100%;" ng-style="{height: screenHeight-160 + 'px'}"> 2 <div id="pdf-containerTF" style="width: 100%; height: 100%;border-radius: 10px; box-shadow: 0 0 10px #3268d2; background: #ffffff;padding: 0 5px;margin-top:5px;"> 3 <ion-scroll delegate-handle="pdfScroll" zooming="true" direction="xy" style="width: 100%; height: 100%;" scrollbar-y="false" scrollbar-x="false" min-zoom="1"> 4 <div id="pdf-popTF" style="width: 100%; height: 100%;border-radius: 10px; background: #ffffff;position: absolute;padding: 0px;"> 5 </div> 6 </ion-scroll> 7 </div> 8 </div>
$scope.getFileData=function () {
var params={
fileId:$scope.fileId
}
$ionicLoading.show({});
yxxPdfHttp.post(QUERY_SERVICE_FILE_DATA,params, function (data) {
if(data){
$ionicLoading.hide({});
$scope.fileDataObj.fileTitle=$scope.fileTitle;
showPdfFileM(data);
$rootScope.isRefresh = true;
}else{
$ionicLoading.hide({});
alert({type: '', title: '溫馨提示', msg: "請求發生異常"});
}
}, function (data) {
$ionicLoading.hide({});
alert({type:'',title: '錯誤',msg:'服務器繁忙，請稍后重試！'});
});
}
封裝專用於請求數據流的ajax請求
//封裝接收pdf的ajax
.factory('yxxPdfHttp', ["$http", "$rootScope", "$timeout", function ($http, $rootScope, $timeout) {
var url = "";
return {
post: function (method, params, success, error, config) {
// console.log(params)
var head = {
accepts: '*/*',
Authorization: 'Bearer ' + $rootScope.Authorization
};
if (method == QUERY_LOGIN_TOKEN) {
head = {
accepts: '*/*'
};
}
var asflag = true;
if (config) {
if ('async' in config) {
asflag = config.async;
}
}
$.ajax({
type: "post",
url: serverPath + method,
contentType: 'application/json',
// responseType:'multipart/form-data',
mimeType: 'text/plain; charset=x-user-defined',
dataType: 'text',
headers: head,
timeout: 180000,
async: asflag,
data: JSON.stringify(params),
success: function (data, status, xhr) {
// success(JSON.parse(data));
success(data);
// console.log(data);
},
complete: function (request, textStatus) {
if (textStatus == 'timeout') {
alert({ type: 'error', title: '溫馨提示', msg: "請求超時" });
$timeout(function () { $rootScope.$apply() })
}
},
error: function (request, data, exception) {
error(request.responseJSON);
console.log(request);
console.log(data);
if (request.readyState == 0 && request.status == 0) {
console.log(request.readyState);
console.log(request.status);
} else if (request && request.status != 200) {
//在非登錄頁token 失效調原生方法回到登錄頁
if (request.status == 401) {
if (window.webkit) {
window.webkit.messageHandlers.authfailed.postMessage({
params: {
code: false
}
})
} else {
nativeObj.backLogin("88");
}
} else {
var message = '';
if (request.responseJSON) {
message = request.responseJSON.message;
} else if (request.responseText) {
message = JSON.parse(request.responseText).message;
} else {
message = '請求異常';
}
alert({ type: '', title: request.status + ':' + method + ':' + request.getResponseHeader('request_id'), msg: message });
}
} else {
alert({ type: 'error', title: '錯誤', msg: "系統異常請聯系管理員。" });
}
$timeout(function () { $rootScope.$apply() })
}
});
}
};
}])
修改封裝解析utf-8的方法 var showPdfFileM = function (pdf) { // var DEFAULT_URL = "";//注意，刪除的變量在這里重新定義 // var PDFData = ""; var rawLength = pdf.length; //轉換成pdf.js能直接解析的Uint8Array類型,見pdf.js-4068 var array = new Uint8Array(new ArrayBuffer(rawLength)); for (i = 0; i < rawLength; i++) { array[i] =pdf.charCodeAt(i) & 0xff; } // DEFAULT_URL = array; // var data = char2buf(window.atob(pdf)); var data = array; pdfjsLib.getDocument({ data: data, cMapUrl: 'lib/pdf.js/web/cmaps/', cMapPacked: true }).then(function (pdfDoc_) { pdfDoc = pdfDoc_; count = pdfDoc.numPages; //繪制所有的頁面 renderAllTF(); });