移动端实现文档下载

最新推荐文章于 2023-08-14 11:08:25 发布

iiiilooaixuud

最新推荐文章于 2023-08-14 11:08:25 发布

阅读量182

点赞数

文章标签： html5 css3 前端

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

版权

效果：

代码：

  <a
             v-if="item.file_url != null"
              style="cursor: pointer"
                :href="systemConfig.industrialCenterApi + item.file_url.fileUrl"
               @click="roleupdate(item)" 
                :download="item.file_url.file_name"
                class="load_btn"
                >立即下载</a
              >
            <p v-else @click="downloadNull" class="load_btn">立即下载</p>

   roleupdate(item){
  if (item.file_url != null) {
    this.fetchExportBill(systemConfig.industrialCenterApi + item.file_url.fileUrl,item.file_url.fileName);
    getUpdatedowncount({
      id: item.id,
    }).then((res) => {
      if (res.success && res.data) {
        item.downcount++;
      }
    });
  }
},
        fetchExportBill(url, name) {
      axios.get(url, { responseType: "arraybuffer" }).then((res) => {
        const blob = new Blob([res], { 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);
      });
    },