解決uni pdf.js 介面請求后臺檔案流顯示白屏問題
- pdf.js的使用這里不再多介紹了，直接奔向主題，
- 但是我需要的是這個樣子的
- 結果就顯示肯定是不行的，，，查閱資料修改代碼
- 參考文章
pdf.js的使用這里不再多介紹了，直接奔向主題，
場景介紹：檔案管理系統，要求檔案可以預覽pdf，向后臺請求拿到檔案流，
網上查到的資料都是這個樣子的
通過頁面引數傳值的方式加載pdf檔案
file的值需要URLEncode編碼 指向服務器端
例如： http://xxxxx.com:89/demo/fileupdownfud=1&rid=4&isweb=1&iswebshow=1&dbid=01&filepath=fj_ob_item/Y201809/11.pdf
URLEncode編碼：為 http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
訪問地址為： http://127.0.0.1:8080/pdfjs/web/viewer.html?file=http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
原文鏈接：https://blog.csdn.net/l_ai_yi/article/details/82388497
————————————————
著作權宣告：本文為CSDN博主「bruce60」的原創文章，遵循CC 4.0 BY-SA著作權協議，轉載請附上原文出處鏈接及本宣告，
原文鏈接：https://blog.csdn.net/bruce60/article/details/109127598
但是我需要的是這個樣子的
let pdfData = "";
let data = {}
data.fileUrl = this.query.id
uni.request({
url: baseUrl + `xxxxx/access_token=${token}`,
method: "POST",
data: data,
success: (res) => {
pdfData = res.data //介面呼叫回傳檔案流
this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
},
fail: (err) => {}
})
結果就顯示肯定是不行的，，，查閱資料修改代碼
let pdfData = "";
let data = {}
data.fileUrl = this.query.id
uni.request({
url: baseUrl + `xxxxx/access_token=${token}`,
method: "POST",
data: data,
responseType: "blob",
headers: {
'Content-Type': 'application/pdf',
},
success: (res) => {
pdfData = res.data //介面呼叫回傳檔案流
let blob = new Blob([pdfData], {
type: 'application/pdf;charset=UTF-8'
})
pdfData = window.URL.createObjectURL(blob);
this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
},
fail: (err) => {}
})
這個結果不錯，出來檔案了的，，，頁數也正確，，，但這個坑爹的竟然白屏了的，，，，文本哪里去了的，上網查資料，說是blob的問題，參考了
https://www.cnblogs.com/jeffhong99/p/12887631.html
很受啟發，檔案流應該是編碼可能有問題，所以文本不能正常決議出，
responseType: “blob”
這個是關鍵東西，上網查看了他的型別，死馬當活馬醫吧，網上一堆跟我同樣問題的人，都沒有解決，我只能自己嘗試
let pdfData = "";
let data = {}
data.fileUrl = this.query.id
uni.request({
url: baseUrl + `xxxxx/access_token=${token}`,
method: "POST",
data: data,
responseType: "arraybuffer",
headers: {
'Content-Type': 'application/pdf',
},
success: (res) => {
pdfData = res.data //介面呼叫回傳檔案流
let blob = new Blob([pdfData], {
type: 'application/pdf;charset=UTF-8'
})
pdfData = window.URL.createObjectURL(blob);
this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
},
fail: (err) => {}
})
responseType: "arraybuffer"
我切換成這個后，pdf顯示出來了，如果有同樣問題的可以嘗試一下，說不定能解決pdf檔案流預覽白屏的問題，折騰我兩天的問題終于能解決了~~
參考文章
https://blog.csdn.net/halo1416/article/details/84590694?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase=
https://www.jianshu.com/p/7f65c1edc541
https://www.jianshu.com/p/242525315bf6
https://blog.csdn.net/bruce60/article/details/109127598
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/265354.html
標籤：其他
上一篇：前端筆記(一)