vue中预览pdf

情况一

如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可

法1：可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签

通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异）

法2：使用iframe标签

<iframe :src="获取到的pdf预览地址></iframe>

法3：使用a标签，也可设置跳转一个新窗口

<a :href="获取到的pdf预览地址></a>

情况二

后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，无法在浏览器中直接进行预览，或者是直接进行了下载，这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决

法1：使用vue-pdf进行预览

（1）安装：

npm install --save vue-pdf

（2）引入：在要使用的vue页面进行引入

import pdf from 'vue-pdf'

        并引入组件

 components: { pdf }

（3）使用：

       单页pdf可以直接使用

<pdf>
    :src="获取到的pdf地址"
</pdf>

       多页pdf通过循环实现

​
<pdf
    v-for="item in pageTotal"
    :src="pdfUrl"
    :key="item"
    :page="item"
>
</pdf>

data中定义：

 data(){
    return{
         pageTotal: null,
         pdfUrl: "http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf"
    }
}

    // 获取pdf总页数
        getTotal() {
            // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
            // 需要使用下述方法的返回值作为url
            this.pdfUrl = pdf.createLoadingTask(this.pdfUrl)
            // 获取页码
            this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {             
            })
        },

此时就可以正常预览：

 法2：不使用插件，使用get请求，修改请求头类型来实现

定义一个函数： 

        openPdf(url) {
            return new Promise((resolve, reject) => {
                let blob = null;
                let xhr = new XMLHttpRequest();
                xhr.open("GET", 'http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf');
                xhr.responseType = "blob";
                xhr.onload = () => {
                    blob = xhr.response;
                    const blobob = new Blob([blob], { type: 'application/pdf;charset=utf-8' });
                    const href = window.URL.createObjectURL(blobob);
                    window.open(href, 'newWindow');
                    resolve(file);
                };
                xhr.onerror = (e) => {
                    reject(e)
                };
                xhr.send();
            });
        },

使用：

 <a href="" @click="openPdf('http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf')" target="_blank">预览文档</a>