营销网站建设工作,昆明网站优化,北京网站开发哪家公司好,陕西省建设总工会网站前端文件下载的多种方式。 前言a标签下载a标签常用属性介绍- target#xff0c;href#xff0c;download。 window.location.href下载window.open下载iframe 下载动态生成a标签下载文件url下载文件流下载blob文件流转换常用类型 使用 streamSaver 看实时下载进度 前言
如果我… 前端文件下载的多种方式。 前言a标签下载a标签常用属性介绍- targethrefdownload。 window.location.href下载window.open下载iframe 下载动态生成a标签下载文件url下载文件流下载blob文件流转换常用类型 使用 streamSaver 看实时下载进度 前言
如果我们要下载一些浏览器读不懂的文件我们可以使用 a 标签在新窗口打开链接也可以使用 windows.open(‘url’) 的方式打开新窗口进行下载。 但如果这个文件浏览器是读得懂的比如 .txt 文件那浏览器就不会执行下载而是会直接在页面中把文件内容展示出来。 根据这个特性我们可以根据需求自由选择如下方案进行下载
a标签下载
a href链接 download链接名称 //点击下载a标签常用属性介绍- targethrefdownload。
target属性 href属性 如果 a 标签没有 href 属性它只是一个超链接的占位符。 a hrefhttp://baidu.com在当前窗口打开百度链接/a
a hrefhttp://baidu.com target_blank在新窗口打开百度链接/a
a href#网页返回顶部/a
a href#miss锚点跳转——本页面跳转/adownload 属性 download 规定当用户单击超链接时将下载目标href 属性中规定的文件。 download 的值为文件下载后的新名称。允许使用任何值浏览器会自动检测正确的文件扩展名并将其添加到文件中例如 .img、.pdf、.txt、.html 等 网络图片download无效点击为预览 a href图片链接 download图片名称 //点击下载图片
a hrefpdf链接 download1.pdf target_blankpdf下载/a //下载pdf浏览器不自动打开 记得让后台给.pdf加个content-type头application/octet-strea
window.location.href下载
// 通用下载方法
export function download(url) {
window.location.href url
} 直接访问可能会覆盖当前页面地址影响用户体验。 只有.pdf和图片可以实现跳转另一个新窗口进行预览其他格式是下载 window.open下载
export function download(url) {window.open(url);},这个方法只能将指定路径的资源加载到浏览器里面如果文件不能被浏览器浏览那就会被浏览器下载到本地。反之如果下载一个txt文本用该方法会直接预览txt文件 iframe 下载
export function download(url) {window.open(about:blank);const iframe document.createElement(iframe);iframe.src url;iframe.style.width 100%;iframe.style.height 100vh;iframe.style.margin 0;iframe.style.padding 0;iframe.style.overflow hidden;iframe.style.border none;win.document.body.style.margin 0;win.document.body.appendChild(iframe);
}动态生成a标签下载
文件url下载
export function download(url) {const link document.createElement(a);link.style.display none;link.download 文件名;link.href url;link.click();document.body.removeChild(link);
}文件流下载
// 用fetch发送请求 对请求回来的二进制文件流进行处理 如果返回的就是文件流 则直接进行fetch后的步骤则可
export function download(url) {fetch(url).then((response) response.blob()) // 获取文件数据流.then((blob) {const url window.URL.createObjectURL(new Blob([blob], {type: 根据文件类型写不同的type,})); // 生成文件在浏览器中的链接const a document.createElement(a);a.href url;a.download 文件名; // 文件名 如果是视频格式 需要加上后缀名 “.flv /.mp4”a.style.display none;document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url); // 清除文件链接}).catch(console.error);}如果遇到下载 txt、jpg 等文件时出现直接打开文件而不是下载文件的情况时可以在下载地址即 url 后拼接 ‘?response-content-typeapplication/octet-stream’ 即可 blob文件流转换常用类型
后缀MIME Type.docapplication/msword.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.xlsapplication/vnd.ms-excel.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet.pptapplication/vnd.ms-powerpoint.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation.flvflv-application/octet-stream.pdfapplication/pdf.pngimage/png.gifimage/gif.jpeg .jpgimage/jpeg.mp3audio/mpeg.mp4video/mpeg4.htmltext/html.csstext/css.jstext/javascript.jsonapplication/json.zipapplication/zip
使用 streamSaver 看实时下载进度
StreamSaver源码地址
npm i streamsaver
import streamSaver from streamsaver使用 StreamSaver.js 下载文件的大概流程是这样的为了方便理解我用一些不专业的术语进行描述
创建一个文件该文件支持写入操作。streamSaver.createWriteStream(‘文件名.后缀’)。使用 fetch 方法访问文件的url将内容一点点的放到 StreamSaver 创建的文件里。监听文件内容是否读取完整读取完就执行“保存并关闭文件”的操作。 fetch(url).then((res) {const fileStream streamSaver.createWriteStream(历史视频.flv,//文件名{size: res.headers.get(content-length),});const readableStream res.body;if (window.WritableStream readableStream.pipeTo) {return readableStream.pipeTo(fileStream).then(() {});}window.writer fileStream.getWriter();const reader res.body.getReader();const pump () reader.read().then((res) res.done ? window.writer.close() : window.writer.write(res.value).then(pump));pump();});
