前端文件操作基础知识（三）下载篇

2019-05-14 00:00:00

文件下载基础知识

前言

下载导出已经是前端开发中非常常见的需求了，针对该需求整理了不同的方案和相关知识点，供你参考。

原理

下载导出的原理： a标签 download属性配合 href传入 url或 base64

该方式对于非同源且浏览器可解析文件无效。因为该情况浏览器会直接预览。

// 通用导出函数
function export (url, fileName) {
    let a = document.createElement('a)
    a.download = fileName
    a.href = url
    a.click()
}

现在讨论 url和 base64的来源问题。

url

直接给定 url链接，不再讨论
通过 URL.createObjectURL 新建

该方法可对 Blob对象或 File对象生成一个 url地址，该 url的生命周期与创建它的 document 绑定，即 document关闭，url也失效。

let blob = new Blob['abc']  // Blob对象或 File对象的来源可参考《前端文件操作》一节介绍
let url = URL.createObjectURL(blob)
export(url, '文件名.后缀')
URL.revokeObjectURL(url)    // 注意要主动释放 URL对象

base64

借助webpack的 url-loader

rules: [
    {
        test: /\.download\.js$/, // 正则匹配的文件将被 url-loader转为 base64
        loader: 'url-loader',
    }
]

let baseUrl = require('a.download.js')  // 此时已被转为 base64数据 `

canvas的 toDataURL方法

let canvas = document.getElementById('canvas')
let dataUrl = canvas.toDataURL()  // 此处将 canvas画布转为 base64数据

FileReader.readAsDataURL

// 将 Blob对象或者 File对象转为 base64
let blob = new Blob(['abc']) // Blob对象或 File对象的来源可参考《前端文件操作》一节介绍
let reader = new FileReader()

reader.onload = function () {
    let url = reader.result
    export(url, '文件名.后缀')
}
reader.readAsDataURL(blob)

← 前端文件操作基础知识（一）文件对象篇前端文件操作基础知识（二）编码篇 →

Gitalking ...

Markdown is supported

Be the first guy leaving a comment!