纯前端让浏览器下载pdf文件

大 | 中 | 小
[不指定 2023/07/18 10:20 | by 刘新修 ]

 

XML/HTML代码
  1. <!--  
  2.  * @Description: npage.vue  
  3.  * @Version: 1.0  
  4.  * @Author: LiuXia  
  5.  * @Date: 2022-08-01 20:32:06  
  6.  * @LastEditors: Jesse Liu  
  7.  * @LastEditTime: 2023-07-17 20:38:42  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  12.       <div>time:</div>  
  13.   </div>  
  14. </template>  
  15.   
  16.   
  17.   
  18. <script>  
  19. import { parseTime } from '@/utils'  
  20. import { downloadFile } from "@/utils/getFile";  
  21. import { fileLinkToStreamDownload , urlFile } from '@/utils/down'  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     message() {  
  26.       return 'PageTest'  
  27.     },  
  28.     parseTime: parseTime  
  29.   },  
  30.   methods:{  
  31.     downfile(filePath){  
  32.       //https://bbwx.kaitaiming.com/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf  
  33.   
  34.       // 后端上传文件返回请求的filePath地址  
  35.       console.log( filePath, 3333333 );  
  36.       //  获取文件名  
  37.       let fileName = urlFile(filePath, 1);  
  38.       //  获取文件后缀  
  39.       let fileExtension = urlFile(filePath, 2);  
  40.       //  url下载  
  41.       fileLinkToStreamDownload(filePath,fileName,fileExtension);  
  42.     }  
  43.   },  
  44.   mounted() {  
  45.     this.downfile('http://localhost:9527/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf');  
  46.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  47.         let data = res.data;  
  48.         let headers = res.headers;  
  49.           
  50.         /*** 调用下载文件 ***/  
  51.         //downloadFile(data, headers)  
  52.     })  
  53.   },  
  54. }  
  55. </script>  
  56.   
  57.   
  58. <style lang="scss" scoped>  
  59. </style>  
JavaScript代码
  1. /* 
  2.  * @Description: down.js 
  3.  * @Author: Jesse Liu 
  4.  * @Date: 2023-02-06 16:27:18 
  5.  * @LastEditors: Jesse Liu 
  6.  * @LastEditTime: 2023-07-17 20:20:05 
  7.  */  
  8. export function fileLinkToStreamDownload(url, fileName, type) {  
  9.   let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;  
  10.   if (!reg.test(url)) {  
  11.     throw new Error("传入参数不合法,不是标准的文件链接");  
  12.   } else {  
  13.     let xhr = new XMLHttpRequest();  
  14.     xhr.open('get', url, true);  
  15.     xhr.setRequestHeader('Content-Type', `application/${type}`);  
  16.     xhr.responseType = "blob";  
  17.     xhr.onload = function () {  
  18.       if (this.status == 200) {  
  19.         //接受二进制文件流  
  20.         console.log(this)  
  21.         var blob = this.response;  
  22.         const blobUrl = window.URL.createObjectURL(blob);  
  23.           // 这里的文件名根据实际情况从响应头或者url里获取  
  24.           const a = document.createElement('a');  
  25.           a.href = blobUrl;  
  26.           a.download = fileName;  
  27.           a.click();  
  28.           window.URL.revokeObjectURL(blobUrl);  
  29.       }  
  30.     }  
  31.     xhr.send();  
  32.   }  
  33. }  
  34.   
  35. // 获取url中需要的数据  type  1: 获取文件名  2：获取后缀  3：获取文件名+后缀  4:获取文件前缀  
  36. export function urlFile(url, type) {  
  37.   let filename = url.substring(url.lastIndexOf('/') + 1)  
  38.   switch (type){  
  39.       case 1: return filename; break;  
  40.       case 2: return filename.substring(filename.lastIndexOf(".") + 1); break;  
  41.       case 3: return filename.substring(0, filename.lastIndexOf(".")); break;  
  42.       case 4: return url.substring(0, url.lastIndexOf('/') + 1)  
  43.   }     
  44. }  

 

vue | 评论(0) | 引用(0) | 阅读(365)