Blob 链接下载

最新推荐文章于 2025-07-01 23:16:35 发布

原创最新推荐文章于 2025-07-01 23:16:35 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

vue 专栏收录该内容

10 篇文章

订阅专栏

起因是使用element plus时上传图片的自定义缩略图中有个下载按钮，于是便捣鼓了一下
element plus是将图片转换成 blob:http 在网页上显示的。但是我们要想下载便只能自己想办法了

 <el-upload
          v-model="form.url"
          action="#"
          :file-list="fileList"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleChange"
          :before-upload="beforeAvatarUpload"
        >
          <el-icon><i-ep-plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><i-ep-zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon><i-ep-download /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  @click="handleRemove(file)"
                  class="el-upload-list__item-delete"
                >
                  <el-icon><i-ep-delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

const handleDownload = (file: UploadFile) => {
  let blob = new Blob([<string>file.url], {
    //这个里面的data 的二进制文件 创建一个文件对象
    type: 'text/plain;charset=utf-8'
  })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = file.name
  a.click()
  URL.revokeObjectURL(a.href)
  a.remove()
}

上面页可以封装一下

function downloadExportFile (res,fileName，type, suffix) {
    const blob = new Blob([res],{type:`application/${type}`});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = fileName + suffix;
    a.click();
    URL.revokeObjectURL(a.href);
    a.remove();
}