在web端在线预览pdf文件（分页预览、下载、打印）

目录

前言

1.js包的下载与存放

1.1 官网下载pdf.js包

下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

1.2 包存放位置：

2.预览占位与文件接口请求

2.1 预览占位

3.文件接口请求

3.1获取文件URL

总结

加深巩固：Ajax请求

1.创建对象

2.初始化，设置方法和请求的地址

3.发送

4.事件绑定，处理服务端返回的结果，readystate是xhr对象中的属性，表示状态

5.设置请求头（post请求）

6.请求成功是触发的事件

7.请求失败时触发的事件

---

前言

本文写作环境是若依开源框架vue2+elementui

在做这个需求的时候，我查找了资料，简单的是有使用vue-pdf的，我写了发现有跨域问题，只能另寻他法，最后发现很有码友大大们使用的是pdf.js插件，我开始着手，在和后端同事的配合调试下终于成功实现了pdf文件在线预览。

1.js包的下载与存放

1.1 官网下载pdf.js包

下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

1.2 包存放位置：

下载完包，解压放在vue项目中的public目录下

2.预览占位与文件接口请求

2.1 预览占位

给一个iframe占位用来预览pdf文件

<iframe id="iframe" ref="pdfFile" :src="'pdf/web/viewer.html?file=' + encodeURIComponent(this.pathUrl)" width="100%" height="750px" border="0">
</iframe>

其中:src="'pdf/web/viewer.html?file=' + encodeURIComponent(this.pathUrl)"是固定的写法，将pdf文件路径传给web文件下的viewer.html文件，encodeURIComponent是URL编码的方法。

3.文件接口请求

3.1获取文件URL(获取到文件流形式)

和后端同事联调下，决定是在进入页面的时候获取文件URL，但此时后台返回的文件类型是blob类型，因为项目的对于其他接口调用的方法都封装好了，所以这里我就用了ajax请求，用于局部刷新页面。

const baseURL = process.env.VUE_APP_BASE_API 
var url = baseURL + '/file/downloadPdf/' + this.form.inspectionReport + '?token=' + getToken()
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function () {
// 请求完成
        if (this.status === 200) {
        // 返回200
        var blob = this.response;
        this.pathUrl = window.URL.createObjectURL(blob)
        iframe.src = this.pathUrl
              }
         };
// 发送ajax请求
xhr.send()

 其中createObjectURL方法是接受一个File或者Blob对象作为参数，并返回一个DOMString,它表示一个指向该对象的URL,该URL可以用作任何Resourse属性的值，比如<img>,<video>或者css种的本地图片，是把一个文件对象引用到一个URL的地址，处于缓存的原因，这样做会提高文件的访问速度，从而可以提高页面的整体加载性能。

总结

以上就是完成pdf文件预览的步骤，可以实现pdf文件的简单预览（分页）、下载。看很多码友大大们还实现了一些可以高亮显示页面内容和驻点什么的，本文这只是一个简单的实现，实现额外功能还需要在此基础上加深研究。

获取到文件地址形式如何预览

如果是pdf文件地址（如http://112.132.1.147:15066/profile/upload/2024/06/25/111111111111111_20240625094010A003.pdf）

则直接在iframe标签上引入地址即可

// pathUrl='http://112.132.1.147:15066/profile/upload/2024/06/25/111111111111111_20240625094010A003.pdf'
<iframe id="iframe" ref="pdfFile" :src="this.pathUrl"
                        width="100%" height="750px" border="0"></iframe>

加深巩固：Ajax请求

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax 是一种浏览器通过 js 异步发起请求， 局部更新页面的技术。

 1.创建对象

var xhr = new XMLHttpRequest();

2.初始化，设置方法和请求的地址

如：xhr.open('GET',URL);

3.发送

xhr.send();

4.事件绑定，处理服务端返回的结果，readystate是xhr对象中的属性，表示状态

xhr.onreadystatechange = function(){
                //判断readystate状态0——（未初始化）还没有调用send方法；1——（载入）已经调用send方法，正在发送请求；2——（载入完成）send方法执行完成，已经接收到全部响应内容；3——（交互）正在解析响应内容；4——（完成）响应内容解析完成，可以在客户端调用
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    //2xx成功
                    if(xhr.status >= 200 && xhr.status<300){
                        //处理结果  行 头 空行 体
                        // 1、响应行
                        // console.log(xhr.status);    //状态码
                        // console.log(xhr.statusText);    //状态字符串
                        // console.log(xhr.getAllResponseHeaders()); //所有响应头
                        // console.log(xhr.response);  //响应体
                        
                        // //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{
 
                    }
                }
            }

5.设置请求头（post请求）

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 6.请求成功是触发的事件

xhr.onload是XMLHttpRequest对象的一个事件，当请求成功完成时触发，在这个事件中，可以通过xhr.responseText属性获取服务器返回的数据，下面是本文讲述的这部分内容

xhr.onload = function () {
                        //处理请求成功完成的操作
                        // 请求完成
                        if (this.status === 200) {
                            // 返回200
                            var blob = this.response;
                            this.pathUrl = window.URL.createObjectURL(blob)
                            iframe.src = this.pathUrl
                        }
                    };

7.请求失败时触发的事件

xhr.onerror是XMLHttpRequest对象的一个事件，当请求失败时触发

xhr.onerror=function(){
    //....
}