【PDF预览】pdfJS预览pdf文件

// 方式1：
this.$http.get(`/web/business/show?id=${id}`).then(res => {
    let { status, statusText, data } = res;
    if (status === 200) {
        this.dialogVisible = true;
        let blob = new Blob([data], { type: 'application/pdf' });//文件流转为blob
        let urlSrc = window.URL.createObjectURL(blob); //创建下载的链接
        this.src = urlSrc;// pdf空白页
    } else {
          this.$Message(statusText, 'warning');
    }
});

正确解析了页码， 但是每页空白。

解决方法: responseType: ‘blob’,
html:

<!-- 预览pdf -->
<el-dialog :visible.sync="dialogVisible" fullscreen :modal="false" @close="dialogVisible = false">
    <div class="showPdf" style="height: 100vh;">
         <iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
   </span>
</el-dialog>

// 方式2：
            this.$http({
                headers: { "Content-Type": "application/pdf" },
                method: "get",
                url: `/web/business/show?id=${id}`,
                responseType: 'blob',
            }).then(res => {
                console.log(res)
                let { status, statusText, data } = res;
                this.dialogVisible = true;
                let blob = new Blob([data], { type: 'application/pdf' });//文件流转为blob
                let urlSrc = window.URL.createObjectURL(blob); //创建下载的链接
                this.src = urlSrc;
            })

至此， 是使用iframe标签预览PDF。

==========================================================

使用pdfJS插件预览PDF

使用pdfjs插件打开，进行pdf预览。↓
pdfjs插件， 获取文件流》文件流转pdf

1、下载pdfjs放在static下。

this.$http({
     // headers: { "Content-Type": "application/pdf" },
     method: "get",
     mimeType: 'text/plain; charset=x-user-defined',
     url: `/web/business/show?id=${id}`,
     responseType: 'blob',
}).then(res => {
     let { status, statusText, data } = res;
     this.url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" }));
     window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(this.url));
            });

预览效果：