下载功能调试
This commit is contained in:
BianLzhaoMin
parent
0091f5c9e7
commit
a85a08703b
|
|
@ -1,79 +1,118 @@
|
|||
import { get, post, put } from '@/http/index.ts';
|
||||
import { get, post, put } from '@/http/index.ts'
|
||||
import axios from 'axios'
|
||||
import { saveAs } from 'file-saver'
|
||||
|
||||
const baseUrl = import.meta.env.VITE_API_URL
|
||||
const service = axios.create({
|
||||
baseURL: baseUrl,
|
||||
timeout: 60000,
|
||||
})
|
||||
|
||||
// 下载blob文件
|
||||
export const downloadFile = ({ fileData, fileType, fileName }) => {
|
||||
const blob = new Blob([fileData], {
|
||||
type: fileType
|
||||
});
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = fileName;
|
||||
link.style.display = 'none';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
const blob = new Blob([fileData], {
|
||||
type: fileType,
|
||||
})
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.style.display = 'none'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
// 通用a链接下载
|
||||
export const downloadFileByUrl = (url) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = url; // 设置文件 URL
|
||||
link.download = ''; // 提供下载提示
|
||||
document.body.appendChild(link); // 将链接添加到 DOM
|
||||
link.click(); // 模拟点击下载
|
||||
document.body.removeChild(link); // 下载后移除链接
|
||||
};
|
||||
const link = document.createElement('a')
|
||||
link.href = url // 设置文件 URL
|
||||
link.download = '' // 提供下载提示
|
||||
document.body.appendChild(link) // 将链接添加到 DOM
|
||||
link.click() // 模拟点击下载
|
||||
document.body.removeChild(link) // 下载后移除链接
|
||||
}
|
||||
|
||||
// pdf、doc、docx等文件下载
|
||||
export const downloadFileData = ({ fileName, fileUrl }) => {
|
||||
const link = document.createElement('a');
|
||||
link.setAttribute('download', '');
|
||||
link.style.display = 'none';
|
||||
link.href = fileUrl;
|
||||
link.download = fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
// URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
const link = document.createElement('a')
|
||||
link.setAttribute('download', '')
|
||||
link.style.display = 'none'
|
||||
link.href = fileUrl
|
||||
link.download = fileName
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
// URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
const blobValidate = (data) => {
|
||||
return data.type !== 'application/json'
|
||||
}
|
||||
|
||||
const tansParams = (params) => {
|
||||
let result = ''
|
||||
for (const propName of Object.keys(params)) {
|
||||
const value = params[propName]
|
||||
var part = encodeURIComponent(propName) + '='
|
||||
if (value !== null && value !== '' && typeof value !== 'undefined') {
|
||||
if (typeof value === 'object') {
|
||||
for (const key of Object.keys(value)) {
|
||||
if (
|
||||
value[key] !== null &&
|
||||
value[key] !== '' &&
|
||||
typeof value[key] !== 'undefined'
|
||||
) {
|
||||
let params = propName + '[' + key + ']'
|
||||
var subPart = encodeURIComponent(params) + '='
|
||||
result += subPart + encodeURIComponent(value[key]) + '&'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result += part + encodeURIComponent(value) + '&'
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export function download(url, params, filename, config) {
|
||||
console.log('🚀 ~ download ~ url:', url)
|
||||
// downloadLoadingInstance = Loading.service({
|
||||
// text: '正在下载数据，请稍候',
|
||||
// spinner: 'el-icon-loading',
|
||||
// background: 'rgba(0, 0, 0, 0.7)',
|
||||
// });
|
||||
return post(url, params, {
|
||||
transformRequest: [
|
||||
(params) => {
|
||||
return tansParams(params);
|
||||
},
|
||||
],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob',
|
||||
...config,
|
||||
})
|
||||
.then(async (data) => {
|
||||
console.log('🚀 ~ .then ~ data:', data)
|
||||
const isBlob = blobValidate(data);
|
||||
console.log('🚀 ~ .then ~ isBlob:', isBlob)
|
||||
if (isBlob) {
|
||||
const blob = new Blob([data]);
|
||||
saveAs(blob, filename);
|
||||
} else {
|
||||
// const resText = await data.text();
|
||||
// const rspObj = JSON.parse(resText);
|
||||
// const errMsg =
|
||||
// errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
|
||||
// Message.error(errMsg);
|
||||
}
|
||||
// downloadLoadingInstance.close();
|
||||
})
|
||||
.catch((r) => {
|
||||
console.error(r);
|
||||
// Message.error('下载文件出现错误，请联系管理员！');
|
||||
// downloadLoadingInstance.close();
|
||||
});
|
||||
console.log('🚀 ~ download ~ url:', url)
|
||||
// downloadLoadingInstance = Loading.service({
|
||||
// text: '正在下载数据，请稍候',
|
||||
// spinner: 'el-icon-loading',
|
||||
// background: 'rgba(0, 0, 0, 0.7)',
|
||||
// });
|
||||
return service
|
||||
.post(url, params, {
|
||||
transformRequest: [
|
||||
(params) => {
|
||||
return tansParams(params)
|
||||
},
|
||||
],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob',
|
||||
...config,
|
||||
})
|
||||
.then(async (data) => {
|
||||
console.log('🚀 ~ .then ~ data:', data)
|
||||
const isBlob = blobValidate(data)
|
||||
console.log('🚀 ~ .then ~ isBlob:', isBlob)
|
||||
if (isBlob) {
|
||||
const blob = new Blob([data])
|
||||
saveAs(blob, filename)
|
||||
} else {
|
||||
// const resText = await data.text();
|
||||
// const rspObj = JSON.parse(resText);
|
||||
// const errMsg =
|
||||
// errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
|
||||
// Message.error(errMsg);
|
||||
}
|
||||
// downloadLoadingInstance.close();
|
||||
})
|
||||
.catch((r) => {
|
||||
console.error(r)
|
||||
// Message.error('下载文件出现错误，请联系管理员！');
|
||||
// downloadLoadingInstance.close();
|
||||
})
|
||||
}
|
||||
|
|
@ -1050,9 +1050,9 @@ const onTempDownLoad = () => {
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async() => {
|
||||
const res: any = await downLoadTemplate()
|
||||
const blob = res.blob()
|
||||
.then(async () => {
|
||||
// const res: any = await downLoadTemplate()
|
||||
// const blob = res.blob()
|
||||
// downloadFile({
|
||||
// fileData: res,
|
||||
// fileType: 'application/octet-stream',
|
||||
|
|
@ -1066,11 +1066,7 @@ const onTempDownLoad = () => {
|
|||
// fileName: `模版_${new Date().getTime()}.xlsx`,
|
||||
// })
|
||||
// })
|
||||
download(
|
||||
'/material-mall/dev/downLoadDev',
|
||||
{},
|
||||
`模版_${new Date().getTime()}.xlsx`
|
||||
)
|
||||
download('/material-mall/dev/downLoadDev', {}, `模版_${new Date().getTime()}.xlsx`)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue