1.寫在前面
突泉網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)建站!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站成立與2013年到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
JS要實(shí)現(xiàn)下載功能,一般都是這么幾個過程:生成下載的URL,動態(tài)創(chuàng)建一個A標(biāo)簽,并將其href指向生成的URL,然后觸發(fā)A標(biāo)簽的單擊事件,這樣就會彈出下載對話框,從而實(shí)現(xiàn)了一個下載的功能。
這里所說的下載,有時候也可以理解為保存。出于安全考慮,JS肯定無法直接調(diào)用FileAPI寫文件到磁盤,但是卻可以通過下載來變相實(shí)現(xiàn)保存功能。
2.幾個備用知識點(diǎn)
2.1. JS觸發(fā)單擊事件
既然是用A標(biāo)簽?zāi)M,那么肯定要知道JS如何主動觸發(fā)單擊事件。
最簡單的觸發(fā)單擊事件肯定是elem.click(),平時在不需要考慮兼容性的場合我都是這么干的,但是畢竟這個方法有兼容性(具體兼容性如何沒做過測試),所以還是要掌握一個通用的方法。
以下代碼是網(wǎng)上比較容易找到的一段代碼,我在前面加了一段MouseEvent的判斷:
/** * 觸發(fā)單擊事件 * @param elem 需要觸發(fā)事件的DOM對象 */ function fireClickEvent(elem) { var event; if(window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } elem.dispatchEvent(event); }
2.2. HTML5的download屬性
這個屬性很重要,它可以指定下載文件名,并且可以告訴瀏覽器目標(biāo)鏈接是一個下載鏈接,不是一個普通鏈接,我們看下面代碼就能看出區(qū)別了:
<a href="data:text/txt;charset=utf-8,測試下載純文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="測試.txt" >下載1</a> <a href="data:text/txt;charset=utf-8,測試下載純文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下載2</a>
可以發(fā)現(xiàn),下載1按鈕能夠?qū)崿F(xiàn)下載,點(diǎn)擊下載2鏈接時直接在瀏覽器打開文件內(nèi)容了。
補(bǔ)充說明:
file:///模式下貌似不生效;
鏈接指向一些第三方鏈接時也不會生效,具體有待研究;
2.3. JS彈出下載對話框
假如給我們的不是一個下載地址而是一個blob對象,我們可以通過URL.createObjectURL來給blob對象生成臨時URL,并且可以利用HTML5的download屬性來指定下載的文件名,好家伙,有了這2個東西我們就可以實(shí)現(xiàn)一個“萬能”的彈出下載對話框方法了。
綜上所述,我又在fireClickEvent的基礎(chǔ)上繼續(xù)簡單封裝了一個openDownloadDialog方法,使用如下:
openDownloadDialog(url, saveName) openDownloadDialog(blob, saveName)
代碼如下:
/** * 通用的打開下載對話框方法,沒有測試過具體兼容性 * @param url 下載地址,也可以是一個blob對象,必選 * @param saveName 保存文件名,可選 */ function openDownloadDialog(url, saveName) { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 創(chuàng)建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的屬性,指定保存文件名,可以不要后綴,注意,file:///模式下不會生效 var event; if(window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); }
3.JS實(shí)現(xiàn)常見文件類型的下載
3.1. JS生成CSV文件并下載
csv是一種逗號分隔的表格文件格式,可以很好的被Excel支持,由于其文件格式簡單,所以經(jīng)常用在簡單的表格上面。最重要的是它是一種純文本格式,可以很輕松地用JS來生成而不借助第三方庫。
3.1.1. CSV格式示例
如下:
姓名,期中成績,期末成績 張三,58,95 李四,98,74 王二,47,38 劉能,15,100 黃五,87,68
excel打開效果如下:
3.1.2. 初次嘗試
首先想到的是使用data:text/txt;來實(shí)現(xiàn),先看一下下載純文本:
<a download="測試.txt" href="data:text/txt;charset=utf-8,測試下載純文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下載</a>
以上代碼沒毛病,然后再換成csv。換csv的最大問題就是如何處理換行,很簡單,用encodeURIComponent編碼一下就可以了:
<button onclick="test()">下載CSV</button> <script> function test() { var csv = '姓名,期中成績,期末成績\n張三,58,95\n李四,98,74'; var a = document.createElement('a'); a.href = 'data:text/txt;charset=utf-8,'+encodeURIComponent(csv); a.download = '測試.csv'; a.click(); // 這里偷個懶,直接用click模擬 } </script>
3.1.3. 解決CSV亂碼問題
雖然我們用的是UTF-8編碼,下載后你會發(fā)現(xiàn),用文本編輯器打開沒問題,但是用Excel打開亂碼:
別急,原因就是少了一個\ufeffBOM頭,改成這樣就沒問題了:
<button onclick="test()">下載CSV</button> <script> function test() { var csv = '姓名,期中成績,期末成績\n張三,58,95\n李四,98,74'; var a = document.createElement('a'); a.href = 'data:text/txt;charset=utf-8,\ufeff'+encodeURIComponent(csv); a.download = '測試.csv'; a.click(); // 這里偷個懶,直接用click模擬 } </script>
3.1.4. 繼續(xù)解決下載文件名的問題
大部分瀏覽器可能都沒啥問題,但是一些比較老的Chrome可能下載的時候指定的download就是不生效,此時可以用blob來解決:
var csv = '姓名,期中成績,期末成績\n張三,58,95\n李四,98,74'; var blob = new Blob(['\ufeff' + data], {type: 'text/csv,charset=UTF-8'}); openDownloadDialog(blob, '測試.csv');
建議一般情況下都用這種方法,穩(wěn)妥一點(diǎn)。
3.1.5. 最后總結(jié)
不考慮兼容性的保存CSV方法:
/** * 保存CSV文件 * @params csv csv文件內(nèi)容 * @params saveName 保存的文件名 */ function saveCSV(csv, saveName) { var a = document.createElement('a'); a.href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv); a.download = saveName; a.click(); }
考慮兼容性的保存CSV方法:
/** * 保存CSV文件 * @params csv csv文件內(nèi)容 * @params saveName 保存的文件名 */ function saveCSV(csv, saveName) { var blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'}); openDownloadDialog(blob, saveName); }
3.2. JS實(shí)現(xiàn)純文本的下載保存
掌握了csv,再去下載純文本基本上就沒啥問題了,就是換一下文件類型而已:
var csv = '你好,我是小茗同學(xué)!\n測試換行!'; var blob = new Blob([data], {type: 'text/txt,charset=UTF-8'}); openDownloadDialog(blob, '測試.csv');
3.3. JS實(shí)現(xiàn)圖片的下載保存
網(wǎng)頁上一般要保存圖片都是從canvas里面拿到的圖片數(shù)據(jù),通過toDataURL轉(zhuǎn)換為base64數(shù)據(jù):
/** * 將某個canvas保存為圖片 * @param canvasObj canvas對象 * @param saveName 保存的名稱 * @param type 保存的圖片格式,如 image/png * @param quality 圖片質(zhì)量,可選0-1 */ function saveImage(canvasObj, saveName, type, quality) { if(!canvasObj) return; type = type || 'image/png'; quality = quality || 0.92; var url = canvasObj.toDataURL(type, quality).replace(/image\/.*?;/, 'image/octet-stream;'); openDownloadDialog(url, saveName); }
擴(kuò)展
關(guān)于文件保存,不嫌麻煩的話,GitHub上面有個比較出名的庫:https://github.com/eligrey/FileSaver.js/
demo:https://eligrey.com/demos/FileSaver.js/
以上所述是小編給大家介紹的JS實(shí)現(xiàn)彈出下載對話框及常見文件類型的下載,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享文章:JS實(shí)現(xiàn)彈出下載對話框及常見文件類型的下載
URL地址:http://bm7419.com/article0/pssdio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、微信小程序、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、動態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)