vue3使用下载附件功能

最新推荐文章于 2024-08-20 09:20:20 发布

iiiilooaixuud

最新推荐文章于 2024-08-20 09:20:20 发布

阅读量936

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_46617584/article/details/131780098

版权

该代码示例展示了如何在Vue.js应用中处理附件下载。通过axios从指定URL获取ArrayBuffer响应，然后转换为Blob对象，创建ObjectURL，最后模拟点击事件触发下载。此方法特别适用于下载Excel文件。

摘要由CSDN通过智能技术生成

效果：

点击即可以下载打开。

代码：

                      <div v-show="item.attachment.length > 0">
                        <h3>下载附件</h3>
                        <div
                          v-for="(doc, docIndex) in item.attachment"
                          :key="docIndex"
                        >
                          <a
                            style="color: #4183c4"
                            :class="['file', docIndex == 0 ? 'firstFile' : '']"
                            @click="
                              fetchExportBill(
                                `${downloadUrl}?Id=${doc.fileId}`,
                                doc.disPlayName
                              )
                            "
                            :download="doc.disPlayName"
                          >
                            <file-zip-outlined
                              style="font-size: 14px; margin-right: 5px"
                            />{{ doc.disPlayName }}
                            <!-- <a-icon type="file-zip" style="font-size: 14px; margin-right: 5px" />{{ doc.disPlayName }} -->
                          </a>
                        </div>
                      </div>

const { downloadUrl } = window.defaultconfig;
function fetchExportBill(url, name) {
  axios.get(url, { responseType: "arraybuffer" }).then((res) => {
    const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
    const objectUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.download = name;
    a.href = objectUrl;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}