pdf在线预览功能的两种方法

项目中要实现PDF在线预览功能,目前主流浏览器自身都支持PDF文件的解析预览,故提供两种方法:
方法一:直接利用Blob对象和window.open(),此方法需要浏览器自身支持PDF

handlerPDF(){
                 axios.get("XXX.pdf或者是PDF文件流地址", {
                      responseType: 'blob'
                  }).then(res=>{
                     var blob = new Blob([res.data], { type: 'application/pdf'});
                     const url = URL.createObjectURL(blob)
                     window.open(url);
                     setTimeout(() => {
                       URL.revokeObjectURL(url)
                     }, 3000)//释放资源
                 });
            },

方法二:借助第三发插件,此处使用的是pdf.js 访问远程服务器中的PDF文件
下载地址 http://mozilla.github.io/pdf.js/getting_started/#download
下载后直接将所有文件放到项目新建的目录中

//第一步: 将pdf.js静态资源存放到项目resources/statics/pdf 目录下(pdf为自己新建的目录)
//第二步: 在html页面上新增预览按钮
<a @click="handlerDown">预览</a>
//第三步: 
handlerDown() {
        //pdf在线预览时有时会出现中文乱码问题,此处不赘述,自行度娘.
        window.open("/pdf/web/viewer.html?file=此处是远程服务器PDF的地址);
       },

上一篇:OpenGL代码学习(15)--理解透视投影矩阵


下一篇:下载文件