Commit 348528a4faca5c66d5f1f0aab528bdc7186c1ae5
1 parent
190a9c1d
feat: 文件下载功能-安卓微信是赋值链接浏览器打开&其他是点击直接下载
Showing
3 changed files
with
140 additions
and
4 deletions
| 1 | import request from '@/utils/request' | 1 | import request from '@/utils/request' |
| 2 | -import { ContentTypeEnum } from '@/utils/httpEnum'; | ||
| 3 | import config from '@/config' | 2 | import config from '@/config' |
| 4 | import { getToken } from '@/utils/auth' | 3 | import { getToken } from '@/utils/auth' |
| 5 | 4 | ||
| @@ -32,6 +31,20 @@ export function uploadFileApi(data) { | @@ -32,6 +31,20 @@ export function uploadFileApi(data) { | ||
| 32 | } | 31 | } |
| 33 | 32 | ||
| 34 | /** | 33 | /** |
| 34 | + * 下载文件通用接口 | ||
| 35 | + * @param id | ||
| 36 | + */ | ||
| 37 | +export function downloadFileApi(id) { | ||
| 38 | + return request({ | ||
| 39 | + url: `/download/security/url`, | ||
| 40 | + method: 'get', | ||
| 41 | + params: { | ||
| 42 | + id | ||
| 43 | + }, | ||
| 44 | + }) | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +/** | ||
| 35 | * 回去城市接口 省市区 一次性返回 | 48 | * 回去城市接口 省市区 一次性返回 |
| 36 | */ | 49 | */ |
| 37 | export function selectorCityApi() { | 50 | export function selectorCityApi() { |
| @@ -63,4 +76,4 @@ export function generateCodeApi(type) { | @@ -63,4 +76,4 @@ export function generateCodeApi(type) { | ||
| 63 | type | 76 | type |
| 64 | }, | 77 | }, |
| 65 | }) | 78 | }) |
| 66 | -} | ||
| 79 | +} |
| @@ -32,9 +32,9 @@ | @@ -32,9 +32,9 @@ | ||
| 32 | <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view> | 32 | <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view> |
| 33 | <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view> | 33 | <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view> |
| 34 | <view class="row"><text class="label">经营范围</text><text class="value">{{ form.businessScope }}</text></view> | 34 | <view class="row"><text class="label">经营范围</text><text class="value">{{ form.businessScope }}</text></view> |
| 35 | - <view class="row"><text class="label">工商信息</text><text class="value act">{{ form.businessFileName }}</text> | 35 | + <view class="row"><text class="label">工商信息</text><text class="value act" style="color: #2979ff;" @click="downloadFile(form.businessFileId, form.businessFileName)">{{ form.businessFileName }}</text> |
| 36 | </view> | 36 | </view> |
| 37 | - <view class="row"><text class="label">股东信息</text><text class="value act">{{ form.shareholderFileName }}</text> | 37 | + <view class="row"><text class="label">股东信息</text><text class="value act" style="color: #2979ff;" @click="downloadFile(form.shareholderFileId, form.shareholderFileName)">{{ form.shareholderFileName }}</text> |
| 38 | </view> | 38 | </view> |
| 39 | </view> | 39 | </view> |
| 40 | 40 | ||
| @@ -174,6 +174,7 @@ | @@ -174,6 +174,7 @@ | ||
| 174 | <script> | 174 | <script> |
| 175 | import { getDetailApi, getByIdCreditHistoryList, cancelApi } from '@/api/credit_manage.js' | 175 | import { getDetailApi, getByIdCreditHistoryList, cancelApi } from '@/api/credit_manage.js' |
| 176 | import { getDicName } from '@/utils/dic.js' | 176 | import { getDicName } from '@/utils/dic.js' |
| 177 | +import { downloadFile } from '@/utils/downloadFile.js' | ||
| 177 | import { getDicByCodeApi } from '@/api/base.js' | 178 | import { getDicByCodeApi } from '@/api/base.js' |
| 178 | import CorePersonnel from './corePersonnel.vue' | 179 | import CorePersonnel from './corePersonnel.vue' |
| 179 | import DetailButtons from '@/components/detail-buttons/index.vue' | 180 | import DetailButtons from '@/components/detail-buttons/index.vue' |
| @@ -294,6 +295,14 @@ export default { | @@ -294,6 +295,14 @@ export default { | ||
| 294 | const query = '?id=' + encodeURIComponent(id) | 295 | const query = '?id=' + encodeURIComponent(id) |
| 295 | uni.navigateTo({ url: '/pages/credit_manage/history_detail' + query }) | 296 | uni.navigateTo({ url: '/pages/credit_manage/history_detail' + query }) |
| 296 | }, | 297 | }, |
| 298 | + /** | ||
| 299 | + * 下载文件通用方法 | ||
| 300 | + * @param id | ||
| 301 | + * @param fileName | ||
| 302 | + */ | ||
| 303 | + // async handleDownloadFile(id, fileName) { | ||
| 304 | + // downloadFile(id, fileName) | ||
| 305 | + // }, | ||
| 297 | handleButtonClick(btn) { | 306 | handleButtonClick(btn) { |
| 298 | if (!btn || btn.disabled) return | 307 | if (!btn || btn.disabled) return |
| 299 | const map = { | 308 | const map = { |
| @@ -350,6 +359,7 @@ export default { | @@ -350,6 +359,7 @@ export default { | ||
| 350 | }) | 359 | }) |
| 351 | }, | 360 | }, |
| 352 | getDicName, | 361 | getDicName, |
| 362 | + downloadFile, | ||
| 353 | getCategoryClass(categoryName) { | 363 | getCategoryClass(categoryName) { |
| 354 | if (!categoryName) return '' | 364 | if (!categoryName) return '' |
| 355 | if (categoryName.includes('A') || categoryName.includes('a')) { | 365 | if (categoryName.includes('A') || categoryName.includes('a')) { |
utils/downloadFile.js
0 → 100644
| 1 | + | ||
| 2 | +import { downloadFileApi } from '@/api/base.js' | ||
| 3 | +import { getToken } from '@/utils/auth.js' | ||
| 4 | + | ||
| 5 | +/** | ||
| 6 | + * 下载文件通用方法 | ||
| 7 | + * @param id | ||
| 8 | + * @param fileName | ||
| 9 | + */ | ||
| 10 | +export async function downloadFile(id, fileName) { | ||
| 11 | + if (!id) return | ||
| 12 | + uni.showLoading({ title: '下载中' }) | ||
| 13 | + try { | ||
| 14 | + const res = await downloadFileApi(id); | ||
| 15 | + console.log('downloadFileApi__res', res) | ||
| 16 | + let url = res.data | ||
| 17 | + if (url) { | ||
| 18 | + // #ifdef H5 | ||
| 19 | + // H5环境(包括微信、钉钉等)直接跳转可能不带header,需要把token拼接到url上 | ||
| 20 | + const token = getToken() | ||
| 21 | + if (token) { | ||
| 22 | + const separator = url.includes('?') ? '&' : '?' | ||
| 23 | + url = `${url}${separator}X-Auth-Token=${token}` | ||
| 24 | + } | ||
| 25 | + // #endif | ||
| 26 | + | ||
| 27 | + // 统一使用 uni.downloadFile 下载,解决微信浏览器“在浏览器打开”的提示问题 | ||
| 28 | + uni.downloadFile({ | ||
| 29 | + url, | ||
| 30 | + success: (res) => { | ||
| 31 | + if (res.statusCode === 200) { | ||
| 32 | + const filePath = res.tempFilePath | ||
| 33 | + | ||
| 34 | + // #ifdef H5 | ||
| 35 | + const ua = navigator.userAgent.toLowerCase() | ||
| 36 | + const isAndroid = ua.indexOf('android') > -1 || ua.indexOf('adr') > -1 | ||
| 37 | + const isWeChat = ua.indexOf('micromessenger') !== -1 | ||
| 38 | + | ||
| 39 | + if (isWeChat && isAndroid) { | ||
| 40 | + // 安卓微信环境:提示用户去浏览器下载 | ||
| 41 | + // 注意:Blob URL在外部浏览器无法访问,所以这里必须使用原始的 url (带token) | ||
| 42 | + // 重新构建带token的原始url | ||
| 43 | + let downloadUrl = url | ||
| 44 | + // 这里我们假设 url 变量在上面已经被处理过(拼接了token),如果没有,重新拼接 | ||
| 45 | + if (!downloadUrl.includes('X-Auth-Token')) { | ||
| 46 | + const token = getToken() | ||
| 47 | + if (token) { | ||
| 48 | + const separator = downloadUrl.includes('?') ? '&' : '?' | ||
| 49 | + downloadUrl = `${downloadUrl}${separator}X-Auth-Token=${token}` | ||
| 50 | + } | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + uni.showModal({ | ||
| 54 | + title: '提示', | ||
| 55 | + content: '微信环境下不支持直接下载,请复制链接后在浏览器打开下载', | ||
| 56 | + confirmText: '复制链接', | ||
| 57 | + showCancel: false, | ||
| 58 | + success: function (res) { | ||
| 59 | + if (res.confirm) { | ||
| 60 | + uni.setClipboardData({ | ||
| 61 | + data: downloadUrl, | ||
| 62 | + success: function () { | ||
| 63 | + uni.showToast({ title: '链接已复制', icon: 'success' }) | ||
| 64 | + } | ||
| 65 | + }) | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + }) | ||
| 69 | + } else { | ||
| 70 | + // 其他环境(iOS微信、普通浏览器)使用a标签下载 | ||
| 71 | + const link = document.createElement('a') | ||
| 72 | + link.href = filePath | ||
| 73 | + link.download = fileName || 'download' | ||
| 74 | + document.body.appendChild(link) | ||
| 75 | + link.click() | ||
| 76 | + document.body.removeChild(link) | ||
| 77 | + } | ||
| 78 | + // #endif | ||
| 79 | + | ||
| 80 | + // #ifndef H5 | ||
| 81 | + const fileType = fileName ? fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase() : '' | ||
| 82 | + uni.openDocument({ | ||
| 83 | + filePath, | ||
| 84 | + fileType: fileType || undefined, | ||
| 85 | + showMenu: true, | ||
| 86 | + success: function () { | ||
| 87 | + console.log('打开文档成功') | ||
| 88 | + }, | ||
| 89 | + fail: function (err) { | ||
| 90 | + console.error('打开文档失败', err) | ||
| 91 | + uni.showToast({ title: '无法打开此文件', icon: 'none' }) | ||
| 92 | + } | ||
| 93 | + }) | ||
| 94 | + // #endif | ||
| 95 | + } else { | ||
| 96 | + uni.showToast({ title: '下载失败', icon: 'none' }) | ||
| 97 | + } | ||
| 98 | + }, | ||
| 99 | + fail: (err) => { | ||
| 100 | + console.error('下载失败', err) | ||
| 101 | + uni.showToast({ title: '下载失败', icon: 'none' }) | ||
| 102 | + } | ||
| 103 | + }) | ||
| 104 | + } else { | ||
| 105 | + uni.showToast({ title: '文件地址无效', icon: 'none' }) | ||
| 106 | + } | ||
| 107 | + } catch (e) { | ||
| 108 | + console.error(e) | ||
| 109 | + uni.showToast({ title: '下载出错', icon: 'none' }) | ||
| 110 | + } finally { | ||
| 111 | + uni.hideLoading() | ||
| 112 | + } | ||
| 113 | +} |