Commit 348528a4faca5c66d5f1f0aab528bdc7186c1ae5

Authored by 史婷婷
1 parent 190a9c1d

feat: 文件下载功能-安卓微信是赋值链接浏览器打开&其他是点击直接下载

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')) {
... ...
  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 +}
... ...