本文目錄一覽:
- 1、JS 下載/導出 csv、excel、txt 、img等文件的方法總結
- 2、如何用JavaScript實現文件下載?
- 3、js下載txt文件
- 4、如何使用javascript生成txt格式文件保存到本地,要求跨瀏覽器支持,怎麼做呢?
- 5、用js或jquery生成本地txt文件的代碼
- 6、如何把js生成txt文本?
JS 下載/導出 csv、excel、txt 、img等文件的方法總結
1. 調用後端接口導出文件
示例下載接口url
1.1 window.open(url)
會打開一個新窗口,開始下載後會自動關閉新窗口。Safair 下載後沒有關閉新窗口。
Chrome、IE、Safair支持,貌似火狐不支持
1.2 window.location=url
在當前窗口下載
Chrome、Safair支持
1.3 iframe
在HTML中,iframe 的屬性用src,但在JS中,只有部份瀏覽器支持修改src(讀是沒問題),真正通用的是要修改對應框架的href值。
1.4 a href=”url” download=”filename”點擊鏈接下載/a
HTML5中給a標籤增加了一個download屬性,只要有這個屬性,點擊這個鏈接時瀏覽器就不在打開鏈接指向的文件,而是改為下載,目前只有chrome、firefox、opera、Edge支持。常用此方法點擊下載圖片。
IE既不支持a標籤的download屬性也不允許js調用a 標籤的click方法。
2. 前端直接導出文件到本地
2.1 將數據轉成DataURI用a標籤下載
a href=”DataURI” download=”filename”點擊鏈接下載/a
Data URI Scheme
Data URI Scheme是指可以在Web 頁面中包含圖片但無需任何額外的HTTP 請求的一類URI。 Data URI Scheme一般用於將經過base64編碼的數據嵌入網頁中,從而減少請求資源的鏈接數。IE8 之前的版本都不支持 data URI scheme。
DataURI的格式:
生成DataURI的方式
1. encodeURIComponent
使用這種方式,當數據過多時,URI長度容易超出瀏覽器限制。 encodeURIComponent常用來轉碼接口參數,為了避免服務器收到不可預知的請求,對任何用戶輸入的作為URI部分的內容都需要用encodeURIComponent進行轉義。
2. URL.createObjectURL
URL.createObjectURL的參數是File對象或者Blob對象
IE10以下不支持URL.createObjectURL
2.2 windows.navigator.msSaveBlob IE10~Edge 專用
msSaveBlob 是IE10~Edge 私有方法。
2.3 execCommand
有的資料有提到IE9可以使用execCommand方法來保存數據到本地文件,但是我自己沒有驗證過,不知道是否可行。而且MDN文檔中execCommand沒有查到SaveAs命令。這塊只是做個小記錄。
js數據直接導出/下載數據到本地到方法總結
本文轉載自:
如何用JavaScript實現文件下載?
參考如下:
head runat=”server”
title文件下載/title
/head
script type=”text/javascript”
// 使用JS實現下載.jpg、.doc、.txt、.rar、.zip等文件的方法(參數 imgOrURL 為需要下載的圖片的URL地址)
// 使用該方法實現下載壓縮文件時會有網頁錯誤信息提示
// .doc、.rar、.zip 文件可以直接通過文件地址下載,
// 如:a href=”../Images/test.doc” 點擊下載文件/a a href=”../Images/test.zip” 點擊下載文件/a
function saveImageAs(imgOrURL) {
if (typeof imgOrURL == ‘object’)
imgOrURL = imgOrURL.src;
window.win = open (imgOrURL);
setTimeout(‘win.document.execCommand(“SaveAs”)’, 500);
}
// 使用JS實現下載.txt、.doc、.txt、.rar、.zip等文件的方法(參數 fileURL 為需要下載的圖片的URL地址)
// 使用該方法實現下載壓縮文件時不會有網頁錯誤信息,但是不能使用該方法下載.jpg圖片文件
// .doc、.rar、.zip 文件可以直接通過文件地址下載,
// 如:a href=”../Images/test.doc” 點擊下載文件/a a href=”../Images/test.zip” 點擊下載文件/a
function savetxt(fileURL){
var fileURL=window.open (fileURL,”_blank”,”height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no”);
fileURL.document.execCommand(“SaveAs”);
fileURL.window.close();
fileURL.close();
}
// 功能類似savetxt方法,但是下載時初始文件名為code.txt,而不是跟目標文件名相同
function svcode(obj) {
var winname = window.open(”, ‘_blank’, ‘height=1,width=1,top=200,left=300’);
winname.document.open(‘text/html’, ‘replace’);
winname.document.writeln(obj.value);
winname.document.execCommand(‘saveas’,”,’code.txt’);
winname.close();
}
/script
body
div
br /
a href=”javascript: void 0″ onclick=”savetxt(‘../Images/test.txt’); return false”點擊下載文件/a
br /br /
a href=”javascript:savetxt(‘../Images/test.txt’)” 點擊下載文件/a
br /br /
!– .doc、.rar、.zip 文件可以直接通過文件所在地址下載 —
a href=”../Images/test.doc” 點擊下載文件/a
br /br /
a href=”../Images/test.zip” 點擊下載文件/a
/div
/body
js下載txt文件
首先,下載文件就別想了,你那個execCommand有兼容性問題,貌似其他瀏覽器不支持
至於window.open,這個多數會被攔截吧,現在都不允許彈窗了。至於txt文檔,有的瀏覽器會直接顯示出來,有的會當文件下載,這個關鍵還是在服務器的設置,服務器傳輸過來是有標頭,表明詳細情況,瀏覽器對應處理。
所以你要比如點擊一個對象後彈出下載的界面,可以有幾種方式,比如不用TXT,變成其他比如RAR的,瀏覽器絕對不會直接顯示出來,還有就是在服務器端,弄成不是TXT,弄成動態頁面,然後輸出為TXT,此時設置標頭為下載,不允許直接顯示,不過,如果這個TXT是在其他服務器上,你想點擊了直接下載,這個有難度。
以前我做個一個東西,7年前了,就是把東西弄在框里,這樣下載也可以的
iframe id=”download” src=”對象地址”/iframe
然後調用execCommand保存這個對象。這樣我是成功的,把一個rar顯示在框內,一片亂碼,然後調用這個保存後,成為rar,可以使用。
如何使用javascript生成txt格式文件保存到本地,要求跨瀏覽器支持,怎麼做呢?
最近看到好幾個人問這問題了,其實要實現並不難,而且還是跨瀏覽器的,但並不完美。
IE 是通過 ActiveXObject,前提是瀏覽者的安全設置中允許此項且同意使用。
Firefox/Chrome/Safari/Opera 是通過 a 元素的 href 屬性,加上 base64 數據來實現(data URI)。
下面的代碼在 IE 6-9,Firefox 19,Chrome 26,Safari 5.0.5,Opera 12.15 測試通過。
【注意】base64 函數和完整代碼在空間:hi.baidu.com/keneks/item/a8b10b04fd862f016c904813
script type=”text/javascript”
/* var Base64 = {}; */
window.onload = function() {
var save = document.getElementById(“save”);
// IE
if(/msie/i.test(navigator.userAgent)) {
save.onclick = function() {
var path = prompt(“輸入保存路徑和文件名”, “C:\\test.txt”);
var content = document.getElementById(“content”).value;
content = content.replace(/\n/g, “\r\n”);
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
var s = fso.CreateTextFile(path, true);
s.WriteLine(content);
s.Close();
};
}
// Firefox/Chrome/Safari/Opera
else {
// 鼠標經過 a 的時候就開始 base64 編碼
save.onmouseover = function() {
var content = document.getElementById(“content”).value;
this.setAttribute(“href”,
“data:application/octet-stream;base64,”
+ Base64.encode(content));
};
}
};
/script
用js或jquery生成本地txt文件的代碼
很難實現直接創建文件到本地,因為權限不允許。但可以彈出一個另存為對話框,讓用戶點一下確定就保存。所以代碼可以用js或jquery生成本地txt文件。
代碼就是程序員用開發工具所支持的語言寫出來的源文件,是一組由 字符、符號或信號 碼元以離散形式表示信息的明確的規則體系。代碼設計的原則包括唯一確定性、標準化和通用性、可擴充性與穩定性、便於識別與記憶、力求短小與格式統一以及容易修改等。
源代碼是代碼的分支,某種意義上來說,源代碼相當於代碼。現代程序語言中,源代碼可以書籍或磁帶形式出現,但最為常用格式是文本文件,這種典型格式的目的是為了編譯出計算機程序。計算機源代碼最終目的是將人類可讀文本翻譯成為計算機可執行的二進制 指令,這種過程叫 編譯,它由通過編譯器完成。
作用:
生成目標代碼,即計算機可以識別的代碼。對軟件進行說明,即對軟件的編寫進行說明。為數不少的初學者,甚至少數有經驗的程序員都忽視軟件說明的編寫,因為這部分雖然不會在生成的程序中直接顯示,也不參與編譯。但是說明對軟件的學習、分享、維護和軟件復用都有巨大的好處。因此,書寫軟件說明在業界被認為是能創造優秀程序的良好習慣,一些公司也硬性規定必須書寫。
需要指出的是,源代碼的修改不能改變已經生成的目標代碼。如果需要目標代碼做出相應的修改,必須重新編譯。
代碼組合:
源代碼作為軟件的特殊部分,可能被包含在一個或多個文件中。一個程序不必用同一種格式的源代碼書寫。例如,一個程序如果有 C語言庫的支持,那麼就可以用C語言;而另一部分為了達到比較高的運行效率,則可以用 彙編語言編寫。
較為複雜的軟件,一 般需要數十種甚至上百種的源代碼的參與。為了降低種複雜度,必須引入一種可以描述各個源代碼之間聯繫,並且如 何正確編譯的系統。在這樣的背景下,修訂控制系統(RCS)誕生了,並成為研發者對代碼修訂的必備工具之一。
還有另外一種組合,源代碼的編寫和編譯分 別在不同的平台上實現,專業術語叫做軟件移植。
如何把js生成txt文本?
把JS生成TXT?用程序生成還是手動生成。如果是手動:如果是JS文件,將JS文件的括展名改為TXT就可以了 如果JS是在網頁文檔內,拷貝出來放進TXT文件就可以了
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/159084.html