vue图片文件下载

本文介绍了如何在Vue.js项目中实现图片一键下载的功能,通过简单的JavaScript操作,让用户能够轻松下载网页上的图片。
摘要由CSDN通过智能技术生成
 <div @click="exl()">1111111111</div>



  methods: {
    exl() {
      var img =
        "http://n.sinaimg.cn/photo/transform/600/w300h300/20200527/681a-iufmpmn0346660.jpg";
      const url = img;
      // window.open(_this.detail.imgUrl)
      let xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", url, true);
      xmlhttp.responseType = "blob";
      xmlhttp.onload = function () {
        if (this.status == 200) {
          const blob = this.response;
          const link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          // link.download = url.substring(url.lastIndexOf("/") + 1, url.length);
          link.download =
            "图片." + url.substring(url.lastIndexOf(".") + 1, url.length);
          //此写法兼容可火狐浏览器
          document.body.appendChild(link);
          const evt 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Spring Boot和Vue实现图片下载的方法如下: 1. 在Spring Boot中,创建一个API接口,用于处理图片下载的请求。可以使用`@RestController`注解来标识该接口,并使用`@GetMapping`注解来指定接口的URL路径。在接口的方法中,可以使用`ResponseEntity`作为方法的返回类型,实现将图片传输到客户端。 2. 在Vue中,使用`axios`库发送HTTP请求来调用Spring Boot中的图片下载接口。可以通过`axios.get`方法来发送GET请求,并指定接口的URL路径。在接收到响应之后,可以使用`content-disposition`响应头来解析接收的二进制数据并将其保存为图片文件。 下面是一个简单的代码示例: Spring Boot代码示例: ```java @RestController public class ImageController { @GetMapping("/downloadImage") public ResponseEntity<byte[]> downloadImage() throws IOException { ClassPathResource imageFile = new ClassPathResource("images/sample.jpg"); byte[] bytes = FileCopyUtils.copyToByteArray(imageFile.getInputStream()); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); headers.setContentDisposition(ContentDisposition.builder("attachment") .filename("sample.jpg") .build()); return new ResponseEntity<>(bytes, headers, HttpStatus.OK); } } ``` Vue代码示例: ```javascript axios.get('http://localhost:8080/downloadImage', { responseType: 'blob' }) .then(response => { const url = URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'sample.jpg'); link.click(); URL.revokeObjectURL(url); }) .catch(error => { console.error(error); }); ``` 上述代码中,假设图片文件sample.jpg位于Spring Boot项目的resources/images目录下。Vue端的代码使用了axios库进行HTTP请求,将响应中的二进制数据下载为名为sample.jpg的图片文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值