จะสร้างไฟล์ในหน่วยความจำเพื่อให้ผู้ใช้ดาวน์โหลด แต่ไม่ใช่ผ่านเซิร์ฟเวอร์ได้อย่างไร


824

มีวิธีใดบ้างที่ฉันสามารถสร้างไฟล์ข้อความทางฝั่งไคลเอ็นต์และแจ้งให้ผู้ใช้ดาวน์โหลดโดยไม่ต้องมีการโต้ตอบกับเซิร์ฟเวอร์ ฉันรู้ว่าฉันไม่สามารถเขียนโดยตรงไปยังเครื่องของพวกเขา (ความปลอดภัยและทั้งหมด) แต่ฉันสามารถสร้างและแจ้งให้พวกเขาบันทึกได้หรือไม่


คำตอบ:


432

คุณสามารถใช้ URI ข้อมูล การสนับสนุนเบราว์เซอร์แตกต่างกันไป ดูวิกิพีเดีย ตัวอย่าง:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

octet-stream คือการบังคับให้พรอมต์ดาวน์โหลด มิฉะนั้นจะเปิดในเบราว์เซอร์

สำหรับ CSV คุณสามารถใช้:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

ลองสาธิต jsFiddle


19
นี่ไม่ใช่โซลูชันข้ามเบราว์เซอร์ แต่มีบางสิ่งที่ควรค่าแก่การดู เช่น IE จำกัด การสนับสนุน data uri IE 8 จำกัด ขนาดไว้ที่ 32KB และ IE 7 หรือต่ำกว่านั้นไม่รองรับเลย
ดารินทร์ดิมิทรอฟ

8
ใน Chrome เวอร์ชัน 19.0.1084.46 วิธีการนี้จะสร้างคำเตือนดังต่อไปนี้: "ทรัพยากรตีความเป็นเอกสาร แต่ถ่ายโอนด้วยข้อความชนิด / csv MIME:" data: text / csv, field1% 2Cfield2% 0Afoo% 2Agoo% 2Agoo% 0A " " การดาวน์โหลดไม่ถูกกระตุ้น
Chris

2
มันทำงานได้ใน Chrome ตอนนี้ (ทดสอบกับ v20 และ v21) แต่ไม่ใช่ IE9 (นั่นอาจเป็น jsFiddle แต่อย่างใดฉันก็สงสัย)
earcam

5
ชุดอักขระที่ถูกต้องนั้นเกือบจะเป็น UTF-16 ยกเว้นว่าคุณมีรหัสที่แปลงเป็น UTF-8 JavaScript ใช้ UTF-16 ภายใน หากคุณมีไฟล์ข้อความหรือ CSV ให้เริ่มต้นสตริงด้วย '\ ufeff' เครื่องหมายคำสั่งซื้อไบต์สำหรับ UTF-16BE และเครื่องมือแก้ไขข้อความจะสามารถอ่านอักขระที่ไม่ใช่ ASCII ได้อย่างถูกต้อง
larspars

14
เพียงแค่เพิ่มคุณสมบัติการดาวน์โหลด = "txt.csv" เพื่อให้มีชื่อไฟล์และนามสกุลที่ถูกต้องและบอก OS ของคุณว่าจะทำอย่างไรกับมัน
elshnkhll

724

ทางออกที่ง่ายสำหรับเบราว์เซอร์ที่พร้อมใช้ HTML5 ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}
form * {
  display: block;
  margin: 10px;
}
<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

การใช้

download('test.txt', 'Hello world!');

10
อ๋อ ตรงนี้เป็นสิ่ง @MatthewFlaschen ได้โพสต์ที่นี่ประมาณ 3 ปีที่ผ่านมา
Joseph Silber

48
ใช่ แต่ด้วยdownloadแอตทริบิวต์คุณสามารถระบุชื่อไฟล์ ;-)
MatějPokorný

2
@earcam ได้ชี้ให้เห็นในความคิดเห็นด้านบนแล้ว
Joseph Silber

4
Chrome จะต่อท้ายtxtส่วนขยายเฉพาะในกรณีที่คุณไม่ได้ให้ส่วนขยายในชื่อไฟล์ ถ้าคุณทำdownload("data.json", data)มันจะทำงานตามที่คาดไว้
Carl Smith

6
สิ่งนี้ใช้ได้กับฉันใน Chrome (73.0.3683.86) และ Firefox (66.0.2) มันไม่ทำงานใน IE11 (11.379.17763.0) และ Edge (44.17763.1.0)
Sam

231

โซลูชันด้านบนทั้งหมดไม่สามารถใช้ได้กับเบราว์เซอร์ทั้งหมด นี่คือสิ่งที่ใช้งานได้ใน IE 10+, Firefox และ Chrome (และไม่มี jQuery หรือไลบรารี่อื่น ๆ ):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

โปรดทราบว่าขึ้นอยู่กับสถานการณ์ของคุณคุณอาจต้องการที่จะเรียกURL.revokeObjectURLelemหลังจากลบ ตามเอกสารสำหรับURL.createObjectURL :

ทุกครั้งที่คุณเรียก createObjectURL () จะมีการสร้าง URL วัตถุใหม่แม้ว่าคุณจะสร้างไว้สำหรับวัตถุเดียวกันแล้วก็ตาม แต่ละรายการเหล่านี้ต้องได้รับการปล่อยตัวโดยการเรียก URL.revokeObjectURL () เมื่อคุณไม่ต้องการใช้อีกต่อไป เบราว์เซอร์จะปล่อยสิ่งเหล่านี้โดยอัตโนมัติเมื่อไม่มีการโหลดเอกสาร อย่างไรก็ตามเพื่อประสิทธิภาพที่ดีที่สุดและการใช้หน่วยความจำหากมีเวลาที่ปลอดภัยเมื่อคุณสามารถยกเลิกการโหลดได้อย่างชัดเจนคุณควรทำเช่นนั้น


7
ขอบคุณหนึ่งล้าน ฉันลองตัวอย่างทั้งหมดที่แสดงไว้ที่นี่และมีเพียงอันเดียวที่ใช้ได้กับเบราว์เซอร์ใด ๆ นี่ควรเป็นคำตอบที่ยอมรับได้
LEM

ใน Chrome ฉันไม่ต้องผนวกองค์ประกอบเข้ากับร่างกายเพื่อให้ใช้งานได้
JackMorrissey

1
สำหรับแอป AngularJS 1.x คุณสามารถสร้างอาร์เรย์ Urls ตามที่สร้างขึ้นแล้วล้างข้อมูลเหล่านั้นในฟังก์ชัน $ onDestroy ของส่วนประกอบ มันใช้งานได้ดีสำหรับฉัน
Splaktar

1
คำตอบอื่น ๆ นำไปสู่Failed: network errorใน Chrome อันนี้ใช้ได้ดี
juniper-

4
สิ่งนี้ใช้ได้กับฉันใน Chrome (73.0.3683.86), Firefox (66.0.2), IE11 (11.379.17763.0) และ Edge (44.17763.1.0)
Sam

185

ตัวอย่างข้างต้นทั้งหมดทำงานได้ดีใน chrome และ IE แต่ล้มเหลวใน Firefox โปรดลองพิจารณาการต่อท้ายสมอเข้ากับเนื้อความและลบออกหลังจากคลิก

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

4
อย่างไรก็ตาม: มีข้อผิดพลาดแบบเปิดใน IE 10 (และฉันยังเห็นมันใน 11)ที่พ่น "การเข้าถึงถูกปฏิเสธ" ในa.click()บรรทัดเพราะคิดว่า URL หยดเป็นข้ามแหล่งกำเนิด
Matt

@Matt data uri เป็นจุดกำเนิดไขว้ในบางเบราว์เซอร์ เท่าที่ฉันรู้ไม่ใช่แค่ใน msie แต่ก็เป็นโครเมี่ยมด้วย คุณสามารถทดสอบได้โดยพยายามฉีดจาวาสคริปต์ด้วย data uri มันจะไม่สามารถเข้าถึงส่วนอื่น ๆ ของเว็บไซต์ ...
inf3rno

7
"ตัวอย่างด้านบนทั้งหมดใช้งานได้ดีกับ chrome และ IE แต่ล้มเหลวใน Firefox" เนื่องจากลำดับของคำตอบสามารถเปลี่ยนแปลงได้ตลอดเวลาจึงไม่มีความชัดเจนว่าคำตอบใดอยู่เหนือคุณเมื่อคุณเขียนสิ่งนี้ คุณสามารถระบุได้ว่าวิธีใดที่ใช้ไม่ได้ใน Firefox
Kevin

120

ฉันมีความสุขโดยใช้FileSaver.js ความเข้ากันได้ค่อนข้างดี (IE10 + และทุกอย่างอื่น) และใช้งานง่ายมาก:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

ใช้งานได้ดีกับ Chrome ฉันจะอนุญาตให้ผู้ใช้ระบุตำแหน่งของไฟล์บนดิสก์ได้อย่างไร
gregm

6
ว้าวขอบคุณสำหรับห้องสมุดที่ใช้งานง่าย นี่เป็นคำตอบที่ดีที่สุดและใครสนใจคนที่ใช้ HTML <5 วันนี้
notbad.jpeg

@ รวมฉันไม่แน่ใจว่าคุณสามารถมีปลั๊กอินนี้
Daniel Buckmaster

@ รวม: คุณหมายถึงตำแหน่งดาวน์โหลดใช่หรือไม่ ที่ไม่ได้เกี่ยวข้องกับการ FileSaver.js คุณจะต้องตั้งค่าการกำหนดค่าเบราว์เซอร์ของคุณเพื่อที่จะถามสำหรับโฟลเดอร์ทุกครั้งก่อนการดาวน์โหลดหรือใช้ค่อนข้างใหม่แอตทริบิวต์ดาวน์โหลด<a>บน
CodeManX

1
นี่เป็นทางออกที่ยอดเยี่ยมสำหรับเบราว์เซอร์ตระกูล IE 10+ IE ยังไม่รองรับแท็กดาวน์โหลด HTML 5 และวิธีแก้ไขปัญหาอื่น ๆ ในหน้านี้ (และหน้า SO อื่น ๆ ที่พูดถึงปัญหาเดียวกัน) นั้นไม่ได้ผลสำหรับฉัน FileSaver ftw!
TMC

22

วิธีการต่อไปนี้ใช้งานได้ใน IE11 +, Firefox 25+ และ Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

ดูสิ่งนี้ในรูปแบบ: http://jsfiddle.net/Kg7eA/

Firefox และ Chrome รองรับข้อมูล URI สำหรับการนำทางซึ่งช่วยให้เราสามารถสร้างไฟล์โดยไปที่ data URI ในขณะที่ IE ไม่รองรับเพื่อความปลอดภัย

ในทางตรงกันข้าม IE มี API สำหรับการบันทึกหยดซึ่งสามารถใช้ในการสร้างและดาวน์โหลดไฟล์


ฉันเพิ่งใช้ jquery เพื่อแนบเหตุการณ์ (onclick และ onready) และตั้งค่าคุณสมบัติซึ่งคุณสามารถทำได้ด้วยวานิลลา JS ส่วนหลัก (window.navigator.msSaveOrOpenBlob) ไม่ต้องการ jquery
dinesh ygv

ยังมีข้อ จำกัด ของขนาดสำหรับวิธีการเก็บข้อมูลใช่ไหม?
ฟิ. ย.

msSaveOrOpenBlob แสดงว่าล้าสมัยแล้วที่นี่: developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveBlob
eflat

13

โซลูชันนี้ถูกดึงโดยตรงจากที่เก็บ github ของ tiddlywiki (tiddlywiki.com) ฉันใช้ tiddlywiki ในเบราว์เซอร์เกือบทั้งหมดและใช้งานได้อย่างมีเสน่ห์:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Github repo: ดาวน์โหลดโมดูลตัวรักษาความปลอดภัย


มันใช้งานได้ดีบน Chrome แต่ไม่ใช่ใน Firefox มันทำให้ไฟล์และดาวน์โหลด แต่ไฟล์นั้นว่างเปล่า ไม่มีเนื้อหา. ความคิดใด ๆ ไม่ได้ทดสอบใน IE ...
Narxx

2
ยกเว้นฟังก์ชั่นที่ไม่มีชื่อนี่คือสิ่งที่ฉันโปรดปราน
Yoraco Gonzales

11

โซลูชันที่ทำงานบน IE10: (ฉันต้องการไฟล์ csv แต่ก็เพียงพอที่จะเปลี่ยนประเภทและชื่อไฟล์เป็น txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

1
คำตอบของ Ludovic นั้นมีขนาดใหญ่รวมถึงการรองรับเบราว์เซอร์อื่น ๆ
Dan Dascalescu

10

หากคุณต้องการแปลงสตริงให้พร้อมสำหรับการดาวน์โหลดคุณสามารถลองใช้ jQuery

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

1
อาจจำเป็นต้องใช้ข้อมูล Scape พร้อม encodeURI ตามที่ฉันแนะนำไว้ที่นี่ก่อนที่จะสามารถแสดงความคิดเห็นได้: stackoverflow.com/a/32441536/4928558
atfornes

10

แพ็คเกจjs-file-downloadจากgithub.com/kennethjiang/js-file-downloadจัดการเคสแบบขอบสำหรับการสนับสนุนเบราว์เซอร์:

ดูที่มาเพื่อดูว่ามันใช้เทคนิคต่าง ๆ ที่กล่าวถึงในหน้านี้ได้อย่างไร

การติดตั้ง

yarn add js-file-download
npm install --save js-file-download

การใช้

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

1
ขอบคุณ - เพิ่งผ่านการทดสอบ - ใช้งานได้กับ Firefox, Chrome และ Edge บน Windows
Brian Burns

8

ดังที่ได้กล่าวมาแล้วfilesaverเป็นแพ็คเกจที่ยอดเยี่ยมในการทำงานกับไฟล์ในฝั่งไคลเอ็นต์ แต่มันไม่ได้ดีกับไฟล์ขนาดใหญ่ StreamSaver.jsเป็นโซลูชันทางเลือก (ซึ่งมีการชี้ใน FileServer.js) ที่สามารถจัดการไฟล์ขนาดใหญ่ได้:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

1
Text Encoder นั้นกำลังทดลองอย่างมากในตอนนี้ฉันขอแนะนำให้หลีกเลี่ยง (หรือ polyfilling)
Brandon.Blanchard

7
var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

1
อะไรคือความแตกต่างระหว่างวิธีการนี้กับการสร้าง Blob?
Dan Dascalescu


5

ตามคำตอบ @Rick ซึ่งมีประโยชน์จริงๆ

คุณต้องสแคปสตริงdataถ้าคุณต้องการแชร์ด้วยวิธีนี้:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`ขอโทษฉันไม่สามารถแสดงความคิดเห็นในคำตอบของ @ Rick เนื่องจากชื่อเสียงที่ต่ำในปัจจุบันของฉันใน StackOverflow

ข้อเสนอแนะการแก้ไขถูกใช้ร่วมกันและการปฏิเสธ


1
ฉันไม่สามารถยอมรับข้อเสนอแนะได้ แปลก ... ฉันอัปเดตรหัสแล้ว
Rick

4

เราสามารถใช้URL api โดยเฉพาะURL.createObjectURL ()และBlob api เพื่อเข้ารหัสและดาวน์โหลดอะไรก็ได้

หากการดาวน์โหลดของคุณมีขนาดเล็กก็ใช้งานได้:

document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""


หากการดาวน์โหลดของคุณมีขนาดใหญ่แทนที่จะใช้ DOM วิธีที่ดีกว่าคือการสร้างองค์ประกอบลิงก์พร้อมพารามิเตอร์ดาวน์โหลดและทริกเกอร์คลิก

สังเกตว่าองค์ประกอบลิงค์ไม่ได้ผนวกเข้ากับเอกสาร แต่การคลิกทำงานอยู่ดี! นี่เป็นไปได้ที่จะสร้างการดาวน์โหลด Mo หลายร้อยตัวด้วยวิธีนี้

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.id = "download"
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})  
<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>


โบนัส! ดาวน์โหลดวัตถุใด ๆ ที่เป็นวงจรหลีกเลี่ยงข้อผิดพลาด:

TypeError: ค่าวัตถุ cyclic (Firefox) TypeError: การแปลง

โครงสร้างแบบวงกลมถึง JSON (Chrome และ Opera) TypeError: แบบวงกลม

ไม่รองรับการอ้างอิงค่าอาร์กิวเมนต์ (ขอบ)

การใช้ https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

ในตัวอย่างนี้การดาวน์โหลดdocumentวัตถุเป็น json

/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}


document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()


2

คุณยังสามารถดำเนินการอย่างหนึ่งดีกว่าเพียงแค่ URI ของ - ใช้ Chrome คุณยังสามารถที่จะแนะนำชื่อไฟล์จะใช้เวลาตามที่อธิบายไว้ในบล็อกโพสต์เกี่ยวกับการตั้งชื่อการดาวน์โหลดเมื่อใช้ยูริ


@earcam โพสต์ที่นี่เกือบปีที่ผ่านมา
Joseph Silber

2

ฟังก์ชั่นด้านล่างนี้ทำงาน

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

คุณสามารถเปิดไฟล์ในแท็บใหม่ที่กำหนดชื่อไฟล์ไว้ แต่ไม่ดาวน์โหลดเพียงเปิดในแท็บได้หรือไม่
Carl Kroeger Ihl

1

วิธีการต่อไปนี้ใช้งานได้ใน IE10 +, Edge, Opera, FF และ Chrome:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

ดังนั้นเพียงเรียกใช้ฟังก์ชัน:

saveDownloadedData('test.txt', 'Lorem ipsum');

0

สำหรับฉันมันใช้งานได้อย่างสมบูรณ์แบบโดยมีชื่อไฟล์และนามสกุลเดียวกันกับการดาวน์โหลด

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'title' เป็นชื่อไฟล์ที่มีนามสกุลคือsample.pdf,,waterfall.jpgฯลฯ ..

'file64' เป็นเนื้อหาพื้นฐาน 64 เช่นนี้ Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO


0

ฉันจะใช้แท็กจากนั้นตั้งค่า<a></a> href='path'หลังจากนั้นให้วางภาพไว้ระหว่าง<a>องค์ประกอบต่าง ๆ เพื่อให้ฉันสามารถมองเห็นได้ หากคุณต้องการคุณสามารถสร้างฟังก์ชั่นที่จะเปลี่ยนhrefเพื่อที่มันจะไม่ได้เป็นเพียงลิงค์เดียวกัน แต่เป็นแบบไดนามิก

ให้<a>แท็กidด้วยถ้าคุณต้องการเข้าถึงด้วย javascript

เริ่มต้นด้วยเวอร์ชัน HTML:

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
     <img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

ขณะนี้มี JavaScript:

*Create a small json file*;

const array = [
     "mp3/tupac_shakur-how-do-you-want-it.mp3",
     "mp3/spice_one-born-to-die.mp3",
     "mp3/captain_planet_theme_song.mp3",
     "mp3/tenchu-intro.mp3",
     "mp3/resident_evil_nemesis-intro-theme.mp3"
];

//load this function on window
window.addEventListener("load", downloadList);

//now create a function that will change the content of the href with every click
function downloadList() {
     var changeHref=document.getElementById("mp3Anchor");

     var j = -1;

     changeHref.addEventListener("click", ()=> {

           if(j < array.length-1) {
               j +=1;
               changeHref.href=""+array[j];
          }
           else {
               alert("No more content to download");
          }
}

-22

หากไฟล์มีข้อมูลข้อความเทคนิคที่ฉันใช้คือการใส่ข้อความลงในองค์ประกอบ textarea และให้ผู้ใช้เลือกมัน (คลิกใน textarea แล้ว ctrl-A) จากนั้นคัดลอกตามด้วยการวางลงในโปรแกรมแก้ไขข้อความ


30
ฉันได้พิจารณาแล้ว แต่จากจุดที่เป็นมิตรกับผู้ใช้นี่เป็นหายนะ และต้องบันทึกไฟล์ด้วยส่วนขยาย CSV ลองบอกสิ่งนั้นกับผู้ใช้ของคุณ
Joseph Silber
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.