blob对象实现文件、图片下载

ゝ一世哀愁。 2022-12-29 06:34 162阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>blob对象实现文件下载</title>
    </head>
    
    <body>
      <button type="button">下载图片</button>
      <script type="text/javascript"> function downLoad(url) { // 原生ajax请求 const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; // 二进制数据 xhr.send(); xhr.onload = function () { const fileBlob = xhr.response; console.log('fileBlob', fileBlob); // 将blob转换为url地址 const fileUrl = URL.createObjectURL(fileBlob) console.log('fileUrl', fileUrl); // 创建a标签 const elementA = document.createElement('a'); elementA.setAttribute('href', fileUrl); elementA.innerHTML = '下载'; elementA.setAttribute('download', '') elementA.click() } } let imgUrl = 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'; document.querySelector('button').onclick = function () { downLoad(imgUrl); } </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 mysql blob图片_mysql blob字段存储图片操作示例

表结构： create table view(id int unsigned NOT NULL AUTO\_INCREMENT, catid int,title varcha

小鱼儿/ 2023年01月11日 03:51/ 0 赞/ 216 阅读

相关 blob对象实现文件、图片下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年12月29日 06:34/ 0 赞/ 163 阅读

相关使用eggjs + axios post方式通过blob对象进行文件下载

以下是egg.js的后台代码 const Controller = require('egg').Controller; const path = requi

今天药忘吃喽~/ 2022年12月28日 09:17/ 0 赞/ 302 阅读

相关前端下载文件(blob流文件下载及修改下载文件名称)

项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载

一时失言乱红尘/ 2022年12月27日 14:03/ 0 赞/ 331 阅读

相关 vue项目中下载文件时Blob对象转为JSON对象

背景 > 需要实现文件下载的功能，有如下两种情况： > > 1. 如果符合条件，返回文件流 > 2. 如果不符合条件，则后端返回JSON，附上失败的msg，前端需要将m

ゝ一世哀愁。/ 2022年10月12日 14:58/ 0 赞/ 505 阅读

相关前端页面利用Blob对象创建文件进行下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2022年06月03日 06:37/ 0 赞/ 229 阅读

相关 Blob对象

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。 Java 生成

素颜马尾好姑娘i/ 2022年05月24日 12:56/ 0 赞/ 215 阅读

相关接口返回二进制文件流,前端通过blob对象实现下载

1、[https://www.jianshu.com/p/d175e6058b1b][https_www.jianshu.com_p_d175e6058b1b] 2、[ht

喜欢ヅ旅行/ 2022年02月02日 09:27/ 0 赞/ 287 阅读

相关 vue 通过 Blob实现异步下载文件

> 前言: > > 我是使用 vue-element-admin 里面统一封装了,请求配置和响应拦截器. > > 通过 window.open(url) 的方式,下载

喜欢ヅ旅行/ 2021年11月16日 13:48/ 0 赞/ 1076 阅读

相关 vue(二) vue中使用blob下载文件

1.post请求上传后对后端解析文件，然后下载 uploadSectionFile(param) { const self = this;

左手的ㄟ右手/ 2021年11月10日 07:50/ 0 赞/ 585 阅读