vue3利用 a 标签,文件流,JSZip 压缩包,实现文件下载

这篇具有很好参考价值的文章主要介绍了vue3利用 a 标签,文件流,JSZip 压缩包,实现文件下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

序:

在实现文件的下载,采用 a 标签,会出现图片,没有进行下载,而是,在当前页面打开了图片。

导致原因: ·a标签,有 download 属性,可以实现下载 同源文件( ip 和 端口 相同),当图片不同源 时,点击下载,会在当前窗口直接打开图片,而不是进入下载状态。

1. 后端返回文件 url (a标签)

1.1 没有图片的情况

<template>
  <div>
    <a-modal v-model:visible="props.visible"  title="DownloadFile">
    <div class="down-load-file" v-for = "(item, index) in fileList" :key="index">
      <h4>{{item.fileType}}: </h4>
      <a :href="item.fileUrl" download>{{item.fileName}}</a>
    </div>
    </a-modal>
  </div>
</template>

1.2 下载远程图片

1.2.1 图片地址后加"?response-content-type=application/octet-stream"

使用contentType访问页面的时候,浏览器就会开启下载框对其内容进行下载

<template>
  <div>
    <a-modal v-model:visible="props.visible"  title="DownloadFile">
    <div class="down-load-file" v-for = "(item, index) in fileList" :key="index">
      <h4>{{item.fileType}}: </h4>
      <span class="opr-btn-normal" @click="download(item.fileUrl)">{{item.fileName}}</span>
    </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, createVNode, reactive, defineComponent, ref } from 'vue';

// 列表
const fileList = ref<any[]>([]);

const download = (url) => {
  // 处理图片下载
  let newstring= url.substring(url.length-4, url.length);
  if(['.png', '.jpg','jpeg', '.bmp', '.gif', 'webp', '.psd', '.svg', 'tiff'].indexOf(newstring) !== -1) {
    url = url + '?response-content-type=application/octet-stream'
  }
  let a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download",'');
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
}

</script>

<style lang="less">
.opr-btn-normal {
  color: #007df1;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.down-load-file {
  display: flex;
  >span {
    margin-left: 10px;
  }
}
</style>
1.2.2、通过 canvas 方式 保存图片
<script>
  /**
   * 下载图片
   * @param {string} imgsrc 图片地址
   */
  downloadIamge(imgsrc) {
    // 新建图片对象
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    // 图片加载
    image.onload = function() {
      // 新建 canvas标签
      let canvas = document.createElement("canvas");
      // 设置 canvas宽高
      canvas.width = image.width;
      canvas.height = image.height;
      // 添加 canvas画笔
      let context = canvas.getContext("2d");
      // 绘制图片
      context.drawImage(image, 0, 0, image.width, image.height);
      // 得到图片的 base64 编码
      let url = canvas.toDataURL("image/png");
      // 新建 a标签
      let a = document.createElement("a");
      // 新建点击事件
      let event = new MouseEvent("click");
      // 将图片的 base64 编码,设置为 a标签的地址
      a.href = url;
      // 触发点击事件
      a.dispatchEvent(event);
    };
    // 将图片地址 设置为 传入的参数 imgsrc
    image.src = imgsrc;
  };
 
  /**
   * 下载方法
   * @param {string} filepath 文件地址
   */
  downloads(filepath) {
    // isImageFile():自定义函数,根据*后缀*判断是否是图片
    if (isImageFile(filepath)){
      this.downloadIamge(filepath)
    } else {
      this.downloadFile(filepath)
    }
  };
</script>

2. 后台返回文件流时,用 blob 对象下载文件

参考

// res 是返回的文件流,type 是文件MIME类型, fileName 是给下载的文件一个名称
const blobDownloadFile = (res: any, type: string, fileName: string) => {
  const blob = new Blob([res], {
    type: type
  })
  const a = document.createElement('a')
  const URL = window.URL || window.webkitURL
  const herf = URL.createObjectURL(blob)
  a.href = herf
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  window.URL.revokeObjectURL(herf)
}
blobDownloadFile(url, 'text/plain', '测试')

3. JSZip 库以压缩包下载文件

JSZip库
组件中使用文章来源地址https://www.toymoban.com/news/detail-402340.html

import { onMounted } from 'vue'
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

let dowloadZip: JSZip
const urlToPromise = (url: string) =>
  new Promise((resolve, reject) => {
    JSZipUtils.getBinaryContent(url, (err: any, data: unknown) => {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })

// 添加文件
dowloadZip.file(item.fileName, urlToPromise(item.fileUrl), { binary: true })

// .generateAsync() 生成一个 zip 文件
dowloadZip
  .generateAsync({ type: 'blob' })
  .then(
    (blob) => {
      // saveAs(blob, "测试.zip"); 直接在浏览器打成 测试.zip 包并下载
      saveAs(blob, '测试.zip')
    },
    (e) => {
      console.log(e)
    }
  )

// 在 DOM 挂载之后创建 JSZip 实例
onMounted(() => {
  dowloadZip = new JSZip()
})

到了这里,关于vue3利用 a 标签,文件流,JSZip 压缩包,实现文件下载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java实现打包压缩文件或文件夹生成zip以实现多文件批量下载

    有时候在系统中需要一次性下载多个文件,但逐个下载文件比较麻烦。这时候,最好的解决办法是将所有文件打包成一个压缩文件,然后下载这个压缩文件,这样就可以一次性获取所有所需的文件了。 下面是一个名为CompressUtil的工具类的代码,它提供了一些方法来处理文件压

    2024年02月06日
    浏览(57)
  • vue3文件下载功能

    定义方法: utils.js 使用 test.vue

    2024年02月12日
    浏览(38)
  • 前端实现下载文件(包含压缩包下载)方式汇总

    默认最简单的下载方式是: window.open(后台接口API路径) ,但该方法弊端:因是新开窗口方式,前端展示上,每次会闪下。 此外,如果使用window.open(文件URL)方式: pdf、office文档、psd:直接下载。 图片、txt:新开窗口预览,不会下载;且txt预览,有时出现中文乱码问题。 一、

    2024年02月10日
    浏览(52)
  • Vue 项目使用 jszip 和 file-saver 批量打包压缩图片或附件

    需求与挑战总是并存的,比如今天,又是掉头发的一天!!! 背景:图片上传功能用户会批量上传好多个,并且图片可能还会很大,于是就采用了前端先压缩,然后将压缩包直接传给后端。 1、安装插件: 2、在页面中引入插件: 注释:在引入组件的位置定义一个全局的 zi

    2024年02月11日
    浏览(44)
  • 使用serverless实现从oss下载文件并压缩

            公司之前开发一个网盘系统, 可以上传文件, 打包压缩下载文件, 但是在处理大文件的时候, 服务器遇到了性能问题, 主要是这个项目是单机部署.......(离谱),  然后带宽只有100M, 现在用户比之前多很多, 然后所有人的压缩下载请求都给到这一台服务器了, 比如多个人下

    2024年02月15日
    浏览(31)
  • vue3 pdf、word等文件下载

     效果:     table组件

    2024年02月11日
    浏览(53)
  • Spring Boot实现对超大文件进行异步压缩下载

     在Web应用中,文件下载功能是一个常见的需求,特别是当你需要提供用户下载各种类型的文件时。本文将演示如何使用Spring Boot框架来实现一个简单而强大的文件下载功能。我们将创建一个RESTful API,通过该API,用户可以下载问价为ZIP压缩文件。 首先,确保你已经创建了一个

    2024年02月07日
    浏览(52)
  • vue中,给一个URL地址,利用FileSaver.js插件下载文件到本地

    ①首先下载 FileSaver.js 插件    ②在需要的.vue页面引入  在HTML中引入 ③ 如果想保存一个TXT文档本地 结果:   内容:    ④ 如果想保存一个图片 结果:  图片内容:  如果图片不允许跨域则会出现这种情况:   ⑤下面这个方法则可以完美的解决跨域问题,不光可以下载图

    2024年02月06日
    浏览(56)
  • 前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066

    前端vue单个文件上传支持图片,压缩包以及文件 , 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码部分 JS代码 (引入组件 填充数据) CSS

    2024年02月09日
    浏览(55)
  • vue3中将后端传来的json文件转成excel下载到本地

            在浏览器中将JSON格式数据以excel文件的形式下载。该组件是基于[this thread] (https://stackoverflow.com/questions/17142427/javascript-to-export-html-table-to-excel)提出的解决方案。支持Vue3.2.25及以上版本使用 重要提示! Microsoft Excel中的额外提示         此组件中实现的方法使用H

    2024年02月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包