vue-pdf 通过文件流,页面预览pdf文件
参考大佬博客https://blog.csdn.net/m0_37852904/article/details/95992267?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1<!--预览对话框--><el-dialog class="pdf" :visible.sync="fileType"><p
参考大佬博客
<!--预览对话框-->
<el-dialog class="pdf" :visible.sync="fileType">
<p class="arrow">
<!--上一页-->
<span @click="changePdfPage(0)" class="turn addBtn" :class="{grey: currentPage==1}">上一页</span> {{currentPage}} / {{pageCount}}
<!--下一页-->
<span @click="changePdfPage(1)" class="turn addBtn" :class="{grey: currentPage==pageCount}">下一页</span>
</p>
<!--自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
<!--src需要展示的PDF地址-->
<!--当前展示的PDF页码 -->
<!--PDF文件总页码-->
<!--一开始加载的页面-->
<!--加载事件--><!-- @page-loaded="currentPage=$event" -->
<pdf :src="src" :page="currentPage" @num-pages="pageCount=$event" @loaded="loadPdfHandler">
</pdf>
</el-dialog>
seeMenu(id) {
let url = url?id=id;
_this.$axios.get(url, {
responseType: 'blob',
'Content-Type': 'application/pdf'
}).then(res => {
let content = res.data;
let url="";
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(content);
} else if (window.webkitURL != undefined) { // webkit or chrome
try {
url = window.webkitURL.createObjectURL(content);
} catch (error) {
}
} else if (window.URL != undefined) { // mozilla(firefox)
try {
url = window.URL.createObjectURL(content);
} catch (error) {
}
}
this.src=url;
})
}
更多推荐
所有评论(0)