关于下载的实现
目录
- 先说实现
- 聊下blob
- 二进制数组arrayBuffer、typedArray、dataView相关内容
- bloburl与dataurl
- 区分escapeencodeuri和encodeuricomponent
内容
先说实现
-
在前端,
fetch("/down").then(res => res.blob()).then(blob => { down(blob, "demo.pdf"); }); function down(blob, filename) { var blobURL = window.URL.createObjectURL(blob); var a = document.createElement("a"); a.href = blobURL; a.download = filename; //a标签中用来标识下载！ document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(blobURL); } -
在后端
- 定义好接口返回blob（ expressjs中直接用res.download即可 ）
聊下blob
- 一个 Blob 对象表示一个不可变的，原始数据的类似文件对象。是存放二进制数据的容器。
- blob实例有两个属性，size和type，size以字节为单位，type如image/jpeg
- File 对象是特殊类型的Blob, File其实集成于Blob。
- 可以是来自用户在一个input元素上选择文件后返回的FileList对象
- 可以是来自拖放操作生成的 DataTransfer对象
- 可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果
二进制数组arraybuffer与typedarray与dataview相关内容
- 最早出现ArrayBuffer的原因是，js要和显卡进行数据传输（webGL），需要二进制数据类型。由此诞生二进制数组。二进制数组由三类对象组成。
- ArrayBuffer对象：代表原始的二进制数据。是内存之中的一段二进制数据，可以通过“视图”进行操作。
- TypedArray视图：用来读写简单类型的二进制数据。共包括9种类型的视图，比如Uint8Array（无符号8位整数）数组视图, Int16Array（16位整数）数组视图, Float32Array（32位浮点数）数组视图等等。
- DataView视图：用来读写复杂类型的二进制数据。可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号8位整数）、第二、三个字节是 Int16（16位整数）、第四个字节开始是 Float32（32位浮点数）等等，此外还可以自定义字节序。
bloburl与dataurl
- blob显示的形式blob:域名/e61c67e3-df3a-453a-8f41-df740c1f5faf ，dataURL的显示形式data:image/jpeg;base64,/9j/4AAQ...
- Blob URL的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显示Data URL时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。
- Blob URL可以方便的使用XMLHttpRequest获取源数据（xhr.responseType = 'blob'）。对于Data URL，并不是所有浏览器都支持通过XMLHttpRequest获取源数据的
- Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，你可以在任意浏览器中使用。
- Blob URL除了可以用作图片资源的网络地址，Blob URL也可以用作其他资源的网络地址，例如html文件、json文件等，为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type
区分encodeuri和encodeuricomponent
- 编码之后的效果是%XX或者%uXXXX这种形式
- escape处理字符串，ASCII字母、数字、@*/+ 这几个字符不会被编码，其余的都会
- encodeURI和encodeURIComponent处理编码URL，类似于https://juejin.im/editor/drafts/5cde6dae6fb9a07eda02e5f1
- encodeURI方法不会对下列字符编码 ，ASCII字母、数字、~!@#$&*()=:/,;?+'，重点是/ ? # &
- encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
0 条评论