vue项目通过npm 引入pdf.js 并预览pdf文件
vue项目通过npm 引入pdf.js 并预览pdf文件废话不多说直接上才艺js方法结束废话不多说直接上才艺首先需要引入vue-pdf通过npm install vue-pdf -D或者cnpm install vue-pdf -D其次,需要在项目中引用import pdf from 'vue-pdf'在html中<pdf :src="pdfSrc" v-for="i in numPages
·
vue项目通过npm 引入pdf.js 并预览后端传来的二进制流pdf文件
)
废话不多说 直接上才艺
首先需要引入vue-pdf 通过
npm install vue-pdf -D
或者
cnpm install vue-pdf -D
其次,需要在项目中引用
import pdf from 'vue-pdf'
在html中
<pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"/>
components中
components: { pdf }
data()中
data () {
return {
pdfSrc:'',
numPages:0
}
}
js方法
let res = await 你的二进制pdf文件流获取函数()
this.pdfTask(res)
pdfTask(res){
var self = this
self.pdfSrc= this.getObjectURL(res);
var loadingTask = pdf.createLoadingTask(self.pdfSrc)
loadingTask.then(pdf => {
self.pdfSrc = loadingTask
self.numPages = pdf.numPages// 这里得到pdf的页数
}).catch()
},
// 将返回的流数据转换为url
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 url;
}
结束
请求头部一定要加上 { responseType: 'blob' }
更多推荐
已为社区贡献1条内容
所有评论(0)