Vue ， Element-ui实现 pdf文件禁止预览直接下载

Vue实现pdf文件禁止预览，直接下载

此功能很常见，但是网上其他案例教程太过繁琐，在此用最快简单的方式实现

一般情况下，后端返回的pdf文件是以文件流的形式返回，直接打开的话任何浏览器会解析PDF文件，直接显示的预览效果，而我们需要的是禁止预览直接下载

后端返回的文件流，一般是乱码的

实现方式：

1：安装downloadjs 下载插件依赖

npm install downloadjs 

2：引入所需要的页面，如果想全局使用，可以再main.js中引入

import download from 'downloadjs'

代码结构

<!-- 按钮，item是自己循环列表中的内容，item中有后端返回的文件流的链接-->
 <el-button type="primary"   @click="download(item)"> 下载   </el-button>
 //下载方法                
      download(item) {
      //item.resourceUrl.split(',')[0]是返回的文件流链接，自己做判断
         console.log('直接下载',item.resourceUrl.split(',')[0])
          download(item.resourceUrl.split(',')[0])
      },               
                
             

就是这么干脆利落,urls获取的文件流链接，就是这个download(urls)终极大法即可实现，比任何一种方式都简单明了

记得给我点个赞哦！！