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 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;
              
                })

}