前端实现通过url地址下载文件功能
实现url文件地址下载文件功能
·
前端实现通过url地址下载文件功能
我这边项目用到的是tsx和vue3其他下面框架实现代码应该差不多
- 定义好存放url地址的变量,我这边file是存放要下载文件的url地址的
const state = reactive<any>({
data: {
tableData: [],
},
contentDisplay: false,
file: '',
fileState: '',
pdfFile: '',
suffix: '',
Inquire: {
billingName: '', //内容
isBilling: '',
},
value: []
})
-
写一个下载文件的方法
const download = () => { //state.file是文件的url fetch(state.file).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址 const a = document.createElement('a') a.href = URL.createObjectURL(blob) console.log(a.href) a.download = 'fileName.' + state.suffix; // 下载文件的名字 document.body.appendChild(a) a.click() }) /* state.contentDisplay = false; */ }
-
将这个方法绑定到需要点击下载的按钮上即可
v-slots={{
footer: () => {
return (
<div style="width:110px;margin:30px auto;">
<button type='button' onClick={() => download()} class="pd-button-red">下载文件</button>
</div>
)
},
}}
更多推荐
已为社区贡献4条内容
所有评论(0)