vue3，下载预览的四种方法之responseType-blob、fileName、a标签下载& axio ...

vue3，下载预览的四种方法之responseType-blob、fileName、a标签下载& axios之post哀求写法& 引入js方法文件写法& try和catch、async和await用法

页面

1.1、按钮下载页面

index.vue

1. <div>
2.     <el-button type="primary" @click="handelDowload">下载预览</el-button>
3. </div>
6. <script lang="ts" setup>
7. import axios from "axios";
8. import { downLoadxls } from "@/utils/utils.js";
10. // 下载预览
11. const handelDowload = () => {
12.     axios({ method: 'POST', url: process.env.VUE_APP_API_HOST + constant.ieopCollaborate + '/collaborate/directory/content/downloadPDF', data: { id: directoryId }, responseType: 'blob' }).then((res) => {
13.         if (res.data?.code) {
14.             ElMessage.error(res.data.message)
15.         } else {
16.             downLoadxls(res)
17.             setTimeout(function () {
18.                 ElMessage.success("下载成功")
19.             }, 1000)
20.         }
21.     })
22. }
23. </script>

复制代码

包含4个参数：

• 哀求方式method：POST
  
• 哀求地点url：url
  
• 哀求参数data：data
  
• 定义类型responseType
  

浏览器下载结果图

1.2、表格附件下载页面

index.vue

1. <el-table-column align="center" label="相关附件" prop="fileName">
2.       <template #default="scope">
3.            <span style="color: #409eff; cursor: pointer"
4.                                 @click="handelDowload(scope.row)">{{scope.row.fileName}}</span>
5.       </template>
6. </el-table-column>

复制代码

1.3、引入的方法文件

src\utils\utils.js

1. //文件流导出数据处理 方式一
2. export function downLoadxls(res, fileName) {
3.   let name;
4.   if (fileName) {
5.     name = fileName;
6.   } else {
7.     if (res.headers["content-disposition"]) {
8.       const contentDisposition = res.headers["content-disposition"].split("=");
9.       name = (contentDisposition && decodeURI(contentDisposition[1])) || "";
10.     }
11.   }
12.   const file = new File([res.data], res.data);
13.   const href = URL.createObjectURL(file);
14.   const aTag = document.createElement("a");
15.   aTag.download = name;
16.   aTag.target = "_blank";
17.   aTag.href = href;
18.   aTag.click();
19.   URL.revokeObjectURL(href);
20. }
22. //文件流导出数据处理 方式二
23. export function downLoad(res, fileName) {
24.   let name;
25.   if (fileName) {
26.     name = fileName;
27.   } else {
28.     if (res.headers["content-disposition"]) {
29.       const contentDisposition = res.headers["content-disposition"].split("=");
30.       name = (contentDisposition && decodeURI(contentDisposition[1])) || "";
31.     }
32.   }
33.   const content = res.data
34.   const blob = new Blob([content])
35.   const elink = document.createElement('a')
36.   elink.download = name
37.   elink.style.display = 'none'
38.   elink.href= URL.createObjectURL(blob)
39.   document.body.appendChild(elink)
40.   elink.click()
41.   URL.revokeObjectURL(elink.href)
42.   document.body.removeChild(elink)
43. }

复制代码

2、直接使用接口下载的页面

index.vue

1. <el-table-column align="center" label="相关附件" prop="fileName">
2.                         <template #default="scope">
3.                             <span style="color: #409eff; cursor: pointer"
4.                                 @click="handelDowload(scope.row)">{{scope.row.fileName}}</span>
5.                         </template>
6.                     </el-table-column>
8. <script lang="ts" setup>
9. import axios from '@/utils/request'
10. // import axios from 'axios'
11. const handelDowload = (row: any) => {
12.     console.log(row);
13.         axios({ method: 'POST', url: process.env.VUE_APP_API_HOST + constant.fileUpload + '/download?id=' + file.fileId, responseType: 'blob' })
14.     .then(result => {
15.         const content = result.data
16.         const blob = new Blob([content])
17.         const fileName = file.fileName
18.         if ('download' in document.createElement('a')) {
19.             const elink = document.createElement('a')
20.             elink.download = fileName
21.             elink.style.display = 'none'
22.             elink.href = URL.createObjectURL(blob)
23.             document.body.appendChild(elink)
24.             elink.click()
25.             URL.revokeObjectURL(elink.href)
26.             document.body.removeChild(elink)
27.         } else {
28.             navigator.msSaveBlob(blob, fileName)
29.         }
30.     })
31. }   
32. </script>

复制代码

3、a标签下载文件

index.vue

1. <div class="info_file">
2.   <span class="title_file">附件：</span>
3.   <span class="text_file">
4.     <span class="fileName" v-for="item in fileList" :key="item.fileId" @click="downloadFile(item.fileId,item.fileName)">{{ item.fileName }}</span>
5.   </span>
6. </div>
8. <div class="info">
9.     <div class="title">资质文件:&nbsp;&nbsp;</div>
10.     <div class="text">
11.         <div style="cursor: pointer;color:#409eff"
12.             v-for="item in projOrganizationPatentInfo.qualificationFileVoList" :key="item.id"
13.             @click="_downloadFileWater(item.id, item.fileName)">
14.             <Link style="width: 1em; height: 1em; margin-right: 8px;margin-top: 3px" />{{
15.                 item.fileName }}
16.         </div>
17.     </div>
18.    
19. <span class="span-btn" @click="docDownload(row)" >生成交易函</span>   
20. </div>
23. <script>
24. import { downloadFileApi,downloadFileWaterApi,wordTemplateExportApi } from "@/api/file";
25. import { uploadFileByA } from "@/utils/tool";
26.    
27. // 点击下载附件
28. async downloadFile(fileId,fileName){
29.   try {
30.       let result = await downloadFileApi(fileId)
31.       if(result.data.size){
32.         uploadFileByA(result.data,fileName)
33.       }else{
34.         this.message.error('下载合同失败，请重试')
35.       }
36.   } catch (error) {
37.       console.log(error)
38.   }
39. },
40.    
41. // 下载水印附件
42. const _downloadFileWater=async (id,fileName)=>{
43.     try {
44.         let params = {id:id}
45.         let result = await downloadFileWaterApi(params)
46.         if (result.status == 200) {
47.             uploadFileByA(result.data,fileName)
48.         }
49.     } catch (error) {
50.         console.log(error)
51.     }
52. }
54. // 模板文件下载
55. async docDownload(row){
56.     try {
57.         let params = {
58.             projNo:this.projNo,
59.             patentProjectId:row.id,
60.             exportType:1
61.         }
62.         console.log(params)
63.         let result = await wordTemplateExportApi(params)
64.         if(result.data.size){
65.             uploadFileByA(result.data,`交易函模板.docx`)
66.         }else{
67.             this.message.error('交易函模板下载失败，请重试')
68.         }
69.     } catch (error) {
70.         console.log(error)
71.     }
72. },
73. </script>
75. <style lang="scss" scoped>
76. .info_file{
77.   display: flex;
78.   .title_file{
79.     width: 70px;
80.     flex-shrink: 0;
81.     display: inline-block;
82.     text-align: right;
83.     vertical-align: top;
84.   }
85.   .text_file{
86.     display: inline-block;
87.     .fileName{
88.       display: block;
89.       cursor: pointer;
90.     }
91.   }
92. }
93.    
94. .info {
95.     width: 100%;
96.     margin-bottom: 20px;
97.     display: flex;
98.     color: #666;
100.     .title {
101.         width: 15%;
102.         text-align: right;
103.         font-weight: bold;
104.     }
106.     .text {
107.         font-size: 14px;
108.         width: 85%;
109.         text-align: left;
110.         white-space: pre-wrap;
111.         color: #535353;
112.     }
113. }
114.    
115. .span-btn {
116.     font-size: 12px;
117.     display: block;
118.     color: #409EFF;
119.     cursor: pointer;
120. }   
121. </style>

复制代码

src\utils\tool.js

1. // a标签下载文件
2. /**
3. * @param {content} 文件流信息
4. * @param {fileName} 附件名称
5. */
6. export function uploadFileByA(content,fileName){
7.   const blob = new Blob([content])
8.   if('download' in document.createElement('a')){
9.       const elink = document.createElement('a')
10.       elink.download = fileName
11.       elink.style.display = 'none'
12.       elink.href= URL.createObjectURL(blob)
13.       document.body.appendChild(elink)
14.       elink.click()
15.       URL.revokeObjectURL(elink.href)
16.       document.body.removeChild(elink)
17.   }else{
18.       navigator.msSaveBlob(blob,fileName)
19.   }
20. }

复制代码

src\api\file.js

1. import axios from '@/utils/request'
2. import { getApiUrl } from "@/utils/tool";
3. import  constant  from "@/components/constant";
4. const baseUrl = getApiUrl();
6. // 下载附件
7. export const downloadFileApi = (id)=>{
8.     return axios({
9.         method:'get',
10.         url:baseUrl + constant.fileUpload + '/download?id=' + id,
11.         responseType:'blob'
12.     })
13. }
14. // 下载水印附件
15. export const downloadFileWaterApi = (params)=>{
16.     return axios({
17.         method:'post',
18.         url:baseUrl + constant.publicCoop + '/mark/file/download',
19.         data:params,
20.         responseType:'blob'
21.     })
22. }
24. // 合同模板下载
25. /**
26. *
27. * @param {projNo:项目编号;exportType:0、交易方案  1、交易鉴证函   2、交易通知书} data
28. * @returns
29. */
30. export const wordTemplateExportApi = (data)=>{
31.     return axios({
32.         method:'post',
33.         // url:'http://27.196.111.34:18080/ieop-pri-property1/word/export',
34.         url:baseUrl + constant.intellectual + '/word/export',
35.         responseType:'blob',
36.         data
37.     })
38. }

复制代码

src\utils\tool.js

1. export function getApiUrl(v) {
2.   return process.env.VUE_APP_API_HOST
3. }

复制代码

src\components\constant.js

1. /**
2. * Created by author on 2023/12/18.
3. */
4. export default {
5.   intellectual:'/ieop-pri-property', //3知识产权网关标识
6.   fileUpload:'/yundu-file-wjm', //1知识产权上传文件网关
7.   publicCoop: "/ieop-mtg-coop", // 2公共网关标识
8.   ieopCollaborate: "/ieop-mtg-collaborate", // 在线协作网关标识
9. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。