JavaScript實(shí)現(xiàn)文件下載的超簡單兩種方式分享
文件下載一般有幾種情況
- 1.url
- 2.文件流
file-saver庫實(shí)現(xiàn)文件下載
// 流方式 import { saveAs } from "file-saver"; //content 文件流,xxx.pdf 文件名稱 saveAs(content, `xxx.pdf`); // url方式 import { saveAs } from "file-saver"; const url = 'xxx.jpg' fetch(url) .then((response) => response.blob()) .then((blob) => { saveAs(blob, `xxx.pdf`); })
手寫方式
url方式
原理:創(chuàng)建一個a標(biāo)簽,傳入url點(diǎn)一下a標(biāo)簽就可以下載了
流方式
???????原理:將流轉(zhuǎn)換成緩存的url,再創(chuàng)建一個a標(biāo)簽傳入url,點(diǎn)一下就實(shí)現(xiàn)了
【工具類】文件下載類
//utils/downloadFile class DownloadFile { /** * * @param {*} file 文件流 * @returns */ getObjectURL(file) { let url = null; if (window.createObjectURL !== undefined) { // basic url = window.createObjectURL(file); } else if (window.webkitURL !== undefined) { // webkit or chrome try { url = window.URL.createObjectURL(file); } catch (error) { console.log(error); } } else if (window.URL !== undefined) { // mozilla(firefox) try { url = window.URL.createObjectURL(file); } catch (error) { console.log(error); } } return url; } /** * 文件點(diǎn)擊下載 * @param {*} blob 文件流 * @param {*} fileName 文件名 */ downloadFile(blob, fileName) { let eleLink = document.createElement("a"); eleLink.download = fileName; eleLink.style.display = "none"; // 字符內(nèi)容轉(zhuǎn)變成blob地址 eleLink.href = this.getObjectURL(blob); // 自動觸發(fā)點(diǎn)擊 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink); } /** * 獲取文件名后綴 * @param {*} filename 文件名 * @returns */ getFileFix(filename) { let fix = filename.substring(filename.lastIndexOf("\.") + 1).toLocaleLowerCase(); return fix; } /** * 是否可預(yù)覽 * @param {*} filename 文件名 * @returns true可,false不可 */ isPreview(filename) { let fix = this.getFileFix(filename) switch (fix) { case "jpg": case "jpge": case "png": case "pdf": case "mp4": case "txt": { return true } default: { return false } } } /** * 預(yù)覽文件 * @param {*} blob 文件流 */ preview(blob) { return this.getObjectURL(blob); } /** * 是服務(wù)器流 false 本地流true * @param {*} blob 文件流 */ static isLocalFile(blob) { return blob.raw ? true : false } } export default DownloadFile
下載
import DownloadFile from "@/utils/DownloadFile"; let d = new DownloadFile(); // content 文件流【blob】 d.downloadFile(content, "優(yōu)惠碼.zip");
到此這篇關(guān)于JavaScript實(shí)現(xiàn)文件下載的超簡單兩種方式分享的文章就介紹到這了,更多相關(guān)JavaScript文件下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊,這主要是冒泡傳遞影響了,下面有個不錯的解決方法,大家可以參考下2014-04-04前端知識點(diǎn)之Javascript選擇輸入框confirm用法
這篇文章主要介紹了JavaScript中的confirm方法的基本用法、功能特點(diǎn)、注意事項(xiàng)及常見用途,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下2025-02-02javascript內(nèi)置對象Math案例總結(jié)分析
今天總結(jié)一下javascript 內(nèi)置對象Math中的函數(shù)用法,順帶寫一下常見的案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03bootstrap datetimepicker2.3.11時間插件使用
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker2.3.11時間插件使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11