html pdf预览字节流,vue pdf流文件在前端展示

参考多个资料和具体实践，决定使用pdfjs

下载地址：http://mozilla.github.io/pdf.js/getting_started/#download

下载完成后放到public/static目录下

具体使用

template：

将通过request请求获取的pdf Blod数据流：

getData(url) {

const auth = JSON.parse(localStorage.getItem("auth") || null) || {};

const xhr = new XMLHttpRequest();

xhr.open("GET", url, true);

xhr.setRequestHeader("token", auth.token);

xhr.responseType = "blob";

xhr.onload = function() {

if (xhr.status === 200) {

let content = xhr.response;

this.pdfTask(new Blob([content]));

} else {

return false;

}

};

xhr.send();

},

转换为url，method：

getObjectURL(file) {

let url = null;

if (window.createObjectURL != undefined) {

// basic

url = window.createObjectURL(file);

} else if (window.webkitURL != undefined) {

// webkit or chrome

try {

url = window.webkitURL.createObjectURL(file);

} catch (error) {

console.log(error);

}

} else if (window.URL != undefined) {

// mozilla(firefox)

try {

url = window.URL.createObjectURL(file);

} catch (error) {

console.log(error);

}

}

return window.origin +  "/static/pdf/web/viewer.html?file=" + url;

}

本地测试：

template：

checkFile(event) {

const self = this;

let reader = new FileReader();

reader.onload = function() {

// 将返回的流数据转换为url

self.getObjectURL(new Blob([this.result]));

};

reader.readAsArrayBuffer(event.target.files[0]);

},