赞
踩
大家都知道 a 标签是超链接,点击会跳转至 href 指定的地址。
当我们给 a 标签加上 download 属性后,则会去 href 指定的url下载文件(这里一定是同源的)
new Blob() 存放二进制资源
window.URL.createObjectURL() 会将 Blob存放的二进制资源转为url地址,如此而已
思路 :
1. 首先通过 document.createElement('a') 创建一个a标签 用 link 来接受
2. 通过 link.setAttribute('download', 'filename.html') 或者 直接 link.download = 'filename.html' 去给 a 标签添加 download 属性
3. 通过 window.URL.createObjectURL 将 blob二进制资源 转为 url地址并赋给link.href
4. 然后 执行 link.click() 即可下载
- let html = `
- <div>
- <div>
- <p style="color: red;font-size: 20px;">张三</p>
- </div>
- </div>
- `
- const link = document.createElement('a')
- link.setAttribute('download', 'zhangsan.html')
- // link.download = 'zhangsan.html'
- link.href = window.URL.createObjectURL(new Blob([html], { type: 'text/html' }))
- link.click()
这段代码即可直接将 html 判断下载,下载的文件名称就是 zhangsan.html
- <body>
- <input type="file" id="fileInput">
- <script>
- window.onload = function () {
- fileInput.onchange = function (e) {
- console.log(e.target.files[0])
- const link = document.createElement('a')
- link.href = window.URL.createObjectURL(e.target.files[0])
- // link.setAttribute('download', '1111.html')
- link.download = '1111.html'
- link.click()
- }
- }
- </script>
- </body>
这个demo是 咱们去本地选中一个html文件,通过 e.target.files[0] 拿到的就是 继承自 Blob 的二进制对象(所以不需要 new Blob()), 即可再次去下载该文件
- export function download (url, params) {
- $http({
- method: 'get',
- url: url,
- params: params,
- responseType: 'blob' //arraybuffer
- }).then(response => {
- if (!response) {
- return
- }
- let link = document.createElement('a')
- link.href = window.URL.createObjectURL(new Blob([response.data]))
- link.target = '_blank'
- let filename = response.headers['content-disposition']
- link.download = decodeURI(filename) // 下载的文件名称
- document.body.appendChild(link) // 添加创建的 a 标签 dom节点
- link.click() // 下载
- document.body.removeChild(link) // 移除节点
- }).catch(error => {})
- }
上面有用到decodeURI, 这里就简单扩充一下 decodeURL 和 encodeURI
encodeURI() 函数可把字符串作为 URI 进行编码
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
例子:
- let a = '李四'
- encodeURI(a) //'%E6%9D%8E%E5%9B%9B'
- let a = encodeURI('李四') // '%E6%9D%8E%E5%9B%9B'
- decodeURI(a) // '李四'
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。