Commit 348528a4faca5c66d5f1f0aab528bdc7186c1ae5
1 parent
190a9c1d
feat: 文件下载功能-安卓微信是赋值链接浏览器打开&其他是点击直接下载
Showing
3 changed files
with
140 additions
and
4 deletions
| 1 | 1 | import request from '@/utils/request' |
| 2 | -import { ContentTypeEnum } from '@/utils/httpEnum'; | |
| 3 | 2 | import config from '@/config' |
| 4 | 3 | import { getToken } from '@/utils/auth' |
| 5 | 4 | |
| ... | ... | @@ -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 | 50 | export function selectorCityApi() { |
| ... | ... | @@ -63,4 +76,4 @@ export function generateCodeApi(type) { |
| 63 | 76 | type |
| 64 | 77 | }, |
| 65 | 78 | }) |
| 66 | -} | |
| \ No newline at end of file | ||
| 79 | +} | ... | ... |
| ... | ... | @@ -32,9 +32,9 @@ |
| 32 | 32 | <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view> |
| 33 | 33 | <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view> |
| 34 | 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 | 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 | 38 | </view> |
| 39 | 39 | </view> |
| 40 | 40 | |
| ... | ... | @@ -174,6 +174,7 @@ |
| 174 | 174 | <script> |
| 175 | 175 | import { getDetailApi, getByIdCreditHistoryList, cancelApi } from '@/api/credit_manage.js' |
| 176 | 176 | import { getDicName } from '@/utils/dic.js' |
| 177 | +import { downloadFile } from '@/utils/downloadFile.js' | |
| 177 | 178 | import { getDicByCodeApi } from '@/api/base.js' |
| 178 | 179 | import CorePersonnel from './corePersonnel.vue' |
| 179 | 180 | import DetailButtons from '@/components/detail-buttons/index.vue' |
| ... | ... | @@ -294,6 +295,14 @@ export default { |
| 294 | 295 | const query = '?id=' + encodeURIComponent(id) |
| 295 | 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 | 306 | handleButtonClick(btn) { |
| 298 | 307 | if (!btn || btn.disabled) return |
| 299 | 308 | const map = { |
| ... | ... | @@ -350,6 +359,7 @@ export default { |
| 350 | 359 | }) |
| 351 | 360 | }, |
| 352 | 361 | getDicName, |
| 362 | + downloadFile, | |
| 353 | 363 | getCategoryClass(categoryName) { |
| 354 | 364 | if (!categoryName) return '' |
| 355 | 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 | +} | ... | ... |