前端实现通过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>
                            )
                        },
                    }}