blocks|key|171526|text|我知道的唯一方法是FileSaver.js使用的技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|171527|171528|创建隐藏的<a>标记。|ordered-list-item|style|CODE|171529|将其href属性设置为blob的URL。|171530|将其download属性设置为文件名。|171531|单击<a>标记。|171532|171533|下面是一个简化的示例(jsfiddle)：|171534|var+saveData+=+(function+()+{
++++var+a+=+document.createElement("a");
++++document.body.appendChild(a);
++++a.style+=+"display:+none";
++++return+function+(data,+fileName)+{
++++++++var+json+=+JSON.stringify(data),
++++++++++++blob+=+new+Blob([json],+{type:+"octet/stream"}),
++++++++++++url+=+window.URL.createObjectURL(blob);
++++++++a.href+=+url;
++++++++a.download+=+fileName;
++++++++a.click();
++++++++window.URL.revokeObjectURL(url);
++++};
}());

var+data+=+{+x:+42,+s:+"hello,+world",+d:+new+Date()+},
++++fileName+=+"my-download.json";

saveData(data,+fileName);|code-block|syntax|javascript|171535|我写这个例子只是为了说明这个想法，在生产代码中使用FileSaver.js。|171536|笔记|BOLD|171537|171538|较早版本的浏览器不支持"+download“属性，因为它是HTML5的一部分。|unordered-list-item|171539|浏览器认为某些文件格式不安全，因此下载失败。用txt扩展名保存JSON文件对我来说很有效。|171540|171541|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/eligrey/FileSaver.js/|1|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes|2|http://jsfiddle.net/koldev/cW7W5/^0|9|C|0|0|0|5|3|0|2|4|0|2|8|2|8|1|0|2|3|0|0|B|8|2|0|0|0|0|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|D|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1Q|8|@$A|1R|B|1S|H|I]]|9|@]|C|$]]|$1|J|3|K|5|G|7|1T|8|@$A|1U|B|1V|H|I]]|9|@]|C|$]]|$1|L|3|M|5|G|7|1W|8|@$A|1X|B|1Y|H|I]]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|N|3|O|5|G|7|22|8|@$A|23|B|24|H|I]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|25|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|26|8|@]|9|@$A|27|B|28|1|29]]|C|$]]|$1|S|3|T|5|U|7|2A|8|@]|9|@]|C|$V|W]]|$1|X|3|Y|5|6|7|2B|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|2C|8|@$A|2D|B|2E|H|11]]|9|@]|C|$]]|$1|12|3|-4|5|6|7|2F|8|@]|9|@]|C|$]]|$1|13|3|14|5|15|7|2G|8|@]|9|@]|C|$]]|$1|16|3|17|5|15|7|2H|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|2I|8|@]|9|@]|C|$]]|$1|19|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]|1H|$5|1C|1D|1E|C|$1F|1I]]|1J|$5|1C|1D|1E|C|$1F|1K]]]]

The only way I'm aware of is the trick used by <a href="https://github.com/eligrey/FileSaver.js/" rel="noreferrer">FileSaver.js</a>: 

<ol>
<li>Create a hidden <code>&lt;a&gt;</code> tag.</li>
<li>Set its <code>href</code> attribute to the blob's URL.</li>
<li>Set its <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" rel="noreferrer"><code>download</code></a> attribute to the filename. </li>
<li>Click on the <code>&lt;a&gt;</code> tag.</li>
</ol>

Here is a simplified example (<a href="http://jsfiddle.net/koldev/cW7W5/" rel="noreferrer">jsfiddle</a>):

<pre><code>var saveData = (function () {
 var a = document.createElement("a");
 document.body.appendChild(a);
 a.style = "display: none";
 return function (data, fileName) {
 var json = JSON.stringify(data),
 blob = new Blob([json], {type: "octet/stream"}),
 url = window.URL.createObjectURL(blob);
 a.href = url;
 a.download = fileName;
 a.click();
 window.URL.revokeObjectURL(url);
 };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
 fileName = "my-download.json";

saveData(data, fileName);
</code></pre>

I wrote this example just to illustrate the idea, in production code use FileSaver.js instead.

Notes

<ul>
<li>Older browsers don't support the "download" attribute, since it's part of HTML5.</li>
<li>Some file formats are considered insecure by the browser and the download fails. Saving JSON files with txt extension works for me.</li>
</ul>

blocks|key|171552|text|我只是想通过对Internet+Explorer+(无论如何是最新的版本)的支持来扩展公认的答案，并使用jQuery整理代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171553|$(document).ready(function()+{
++++saveFile("Example.txt",+"data:attachment/text",+"Hello,+world.");
});

function+saveFile+(name,+type,+data)+{
++++if+(data+!==+null+&&+navigator.msSaveBlob)
++++++++return+navigator.msSaveBlob(new+Blob([data],+{+type:+type+}),+name);
++++var+a+=+$("<a+style='display:+none;'/>");
++++var+url+=+window.URL.createObjectURL(new+Blob([data],+{type:+type}));
++++a.attr("href",+url);
++++a.attr("download",+name);
++++$("body").append(a);
++++a[0].click();
++++window.URL.revokeObjectURL(url);
++++a.remove();
}|code-block|syntax|javascript|171554|Here+is+an+example+Fiddle。Godspeed。|offset|length|style|BOLD|171555|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/efu5vhaf/^0|0|0|Q|8|0|P|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I just wanted to expand on the accepted answer with support for Internet Explorer (most modern versions, anyways), and to tidy up the code using jQuery:

<pre><code>$(document).ready(function() {
 saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
 if (data !== null &amp;&amp; navigator.msSaveBlob)
 return navigator.msSaveBlob(new Blob([data], { type: type }), name);
 var a = $("&lt;a style='display: none;'/&gt;");
 var url = window.URL.createObjectURL(new Blob([data], {type: type}));
 a.attr("href", url);
 a.attr("download", name);
 $("body").append(a);
 a[0].click();
 window.URL.revokeObjectURL(url);
 a.remove();
}
</code></pre>

<a href="https://jsfiddle.net/efu5vhaf/" rel="noreferrer">Here is an example Fiddle</a>. Godspeed.

blocks|key|171562|text|与上面的解决方案相同的原则。但我在Firefox52.0+(32位)上遇到了问题，在那里大文件(>40+MBytes)会在随机位置被截断。重新安排revokeObjectUrl()调用可以解决此问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|171563|function+saveFile(blob,+filename)+{
++if+(window.navigator.msSaveOrOpenBlob)+{
++++window.navigator.msSaveOrOpenBlob(blob,+filename);
++}+else+{
++++const+a+=+document.createElement('a');
++++document.body.appendChild(a);
++++const+url+=+window.URL.createObjectURL(blob);
++++a.href+=+url;
++++a.download+=+filename;
++++a.click();
++++setTimeout(()+=>+{
++++++window.URL.revokeObjectURL(url);
++++++document.body.removeChild(a);
++++},+0)
++}
}|code-block|syntax|javascript|171564|jsfiddle+example|offset|length|171565|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/KimNyholm/p48nt3h7/^0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Same principle as the solutions above. But I had issues with Firefox 52.0 (32 bit) where large files (>40 MBytes) are truncated at random positions. Re-scheduling the call of revokeObjectUrl() fixes this issue. 

<pre><code>function saveFile(blob, filename) {
 if (window.navigator.msSaveOrOpenBlob) {
 window.navigator.msSaveOrOpenBlob(blob, filename);
 } else {
 const a = document.createElement('a');
 document.body.appendChild(a);
 const url = window.URL.createObjectURL(blob);
 a.href = url;
 a.download = filename;
 a.click();
 setTimeout(() =&gt; {
 window.URL.revokeObjectURL(url);
 document.body.removeChild(a);
 }, 0)
 }
}
</code></pre>

<a href="https://jsfiddle.net/KimNyholm/p48nt3h7/" rel="noreferrer">jsfiddle example</a>

blocks|key|172871|text|saveFileOnUserDevice+=+function(file){+//+content:+blob,+name:+string
++++++++if(navigator.msSaveBlob){+//+For+ie+and+Edge
++++++++++++return+navigator.msSaveBlob(file.content,+file.name);
++++++++}
++++++++else{
++++++++++++let+link+=+document.createElement('a');
++++++++++++link.href+=+window.URL.createObjectURL(file.content);
++++++++++++link.download+=+file.name;
++++++++++++document.body.appendChild(link);
++++++++++++link.dispatchEvent(new+MouseEvent('click',+{bubbles:+true,+cancelable:+true,+view:+window}));
++++++++++++link.remove();
++++++++++++window.URL.revokeObjectURL(link.href);
++++++++}
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|172872|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>saveFileOnUserDevice = function(file){ // content: blob, name: string
 if(navigator.msSaveBlob){ // For ie and Edge
 return navigator.msSaveBlob(file.content, file.name);
 }
 else{
 let link = document.createElement('a');
 link.href = window.URL.createObjectURL(file.content);
 link.download = file.name;
 document.body.appendChild(link);
 link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
 link.remove();
 window.URL.revokeObjectURL(link.href);
 }
 }
</code></pre>

blocks|key|2776856|text|很晚了，但是因为我有同样的问题，所以我添加了我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2776857|function+newFile(data,+fileName)+{
++++var+json+=+JSON.stringify(data);
++++//IE11+support
++++if+(window.navigator+&&+window.navigator.msSaveOrOpenBlob)+{
++++++++let+blob+=+new+Blob([json],+{type:+"application/json"});
++++++++window.navigator.msSaveOrOpenBlob(blob,+fileName);
++++}+else+{//+other+browsers
++++++++let+file+=+new+File([json],+fileName,+{type:+"application/json"});
++++++++let+exportUrl+=+URL.createObjectURL(file);
++++++++window.location.assign(exportUrl);
++++++++URL.revokeObjectURL(exportUrl);
++++}
}|code-block|syntax|javascript|2776858|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Late, but since I had the same problem I add my solution:

<pre><code>function newFile(data, fileName) {
 var json = JSON.stringify(data);
 //IE11 support
 if (window.navigator &amp;&amp; window.navigator.msSaveOrOpenBlob) {
 let blob = new Blob([json], {type: "application/json"});
 window.navigator.msSaveOrOpenBlob(blob, fileName);
 } else {// other browsers
 let file = new File([json], fileName, {type: "application/json"});
 let exportUrl = URL.createObjectURL(file);
 window.location.assign(exportUrl);
 URL.revokeObjectURL(exportUrl);
 }
}
</code></pre>

blocks|key|172890|text|下载按钮的工作示例，用于将来自url的猫照片保存为"cat.jpg"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|172891|HTML：|172892|<button+onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg',+'cat.jpg')">Download</button>|code-block|syntax|javascript|172893|JavaScript：|172894|function+downloadUrl(url,+filename)+{
++let+xhr+=+new+XMLHttpRequest();
++xhr.open("GET",+url,+true);
++xhr.responseType+=+"blob";
++xhr.onload+=+function(e)+{
++++if+(this.status+==+200)+{
++++++const+blob+=+this.response;
++++++const+a+=+document.createElement("a");
++++++document.body.appendChild(a);
++++++const+blobUrl+=+window.URL.createObjectURL(blob);
++++++a.href+=+blobUrl;
++++++a.download+=+filename;
++++++a.click();
++++++setTimeout(()+=>+{
++++++++window.URL.revokeObjectURL(blobUrl);
++++++++document.body.removeChild(a);
++++++},+0);
++++}
++};
++xhr.send();
}|172895|entityMap^0|5|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

Working example of a download button, to save a cat photo from an url as "cat.jpg":

HTML:

<pre><code>&lt;button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')"&gt;Download&lt;/button&gt;
</code></pre>

JavaScript:

<pre><code>function downloadUrl(url, filename) {
 let xhr = new XMLHttpRequest();
 xhr.open("GET", url, true);
 xhr.responseType = "blob";
 xhr.onload = function(e) {
 if (this.status == 200) {
 const blob = this.response;
 const a = document.createElement("a");
 document.body.appendChild(a);
 const blobUrl = window.URL.createObjectURL(blob);
 a.href = blobUrl;
 a.download = filename;
 a.click();
 setTimeout(() =&gt; {
 window.URL.revokeObjectURL(blobUrl);
 document.body.removeChild(a);
 }, 0);
 }
 };
 xhr.send();
}
</code></pre>

blocks|key|2989512|text|window.location.assign对我不起作用。它可以很好地下载，但在Windows平台上下载CSV文件时没有扩展名。下面的方法对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2989513|++++var+blob+=+new+Blob([csvString],+{+type:+'text/csv'+});
++++//window.location.assign(window.URL.createObjectURL(blob));
++++var+link+=+window.document.createElement('a');
++++link.href+=+window.URL.createObjectURL(blob);
++++//+Construct+filename+dynamically+and+set+to+link.download
++++link.download+=+link.href.split('/').pop()+%2B+'.'+%2B+extension;+
++++document.body.appendChild(link);
++++link.click();
++++document.body.removeChild(link);|code-block|syntax|javascript|2989514|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

window.location.assign did not work for me. it downloads fine but downloads without an extension for a CSV file on Windows platform. The following worked for me.

<pre><code> var blob = new Blob([csvString], { type: 'text/csv' });
 //window.location.assign(window.URL.createObjectURL(blob));
 var link = window.document.createElement('a');
 link.href = window.URL.createObjectURL(blob);
 // Construct filename dynamically and set to link.download
 link.download = link.href.split('/').pop() + '.' + extension; 
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
</code></pre>

blocks|key|175308|text|这是我的解决方案。在我看来，您不能绕过<a>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|175309|​|175310|function+export2json()+{
++const+data+=+{
++++a:+'111',
++++b:+'222',
++++c:+'333'
++};
++const+a+=+document.createElement("a");
++a.href+=+URL.createObjectURL(
++++new+Blob([JSON.stringify(data,+null,+2)],+{
++++++type:+"application/json"
++++})
++);
++a.setAttribute("download",+"data.json");
++document.body.appendChild(a);
++a.click();
++document.body.removeChild(a);
}|code-block|syntax|javascript|175311|<button+onclick="export2json()">Export+data+to+json+file</button>|175312|175313|entityMap^0|J|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

This is my solution. From my point of view, you can not bypass the <code>&lt;a&gt;</code>.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function export2json() {
 const data = {
 a: '111',
 b: '222',
 c: '333'
 };
 const a = document.createElement("a");
 a.href = URL.createObjectURL(
 new Blob([JSON.stringify(data, null, 2)], {
 type: "application/json"
 })
 );
 a.setAttribute("download", "data.json");
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="export2json()"&gt;Export data to json file&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|172931|text|如果不强制使用window.location，您可以简单地使用doc.output('save',+'filename.pdf');来下载生成的文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|172932|entityMap^0|7|F|V|Z|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

If using <code>window.location</code> is not mandatory, you can simply use <code>doc.output('save', 'filename.pdf');</code> to download the generated file.

blocks|key|171640|text|如果你想下载一个pdf并且使用window.location不是必须的，你可以像下面这样使用jsPdf：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|171641|//+Create+document
const+doc+=+new+jsPDF('l',+'px',+'a4');

//+[...]+Add+here+the+jsPdf+doc+filling

//+Launch+the+document+downloading
doc.output('save',+'filename.pdf');|code-block|syntax|javascript|171642|entityMap^0|F|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you want to download a pdf and using <code>window.location</code> is not mandatory, you can use jsPdf like this following :
<pre><code>// Create document
const doc = new jsPDF('l', 'px', 'a4');

// [...] Add here the jsPdf doc filling

// Launch the document downloading
doc.output('save', 'filename.pdf');
</code></pre>

How do you set the name of a blob file in JavaScript when force downloading it through <code>window.location</code>?
<pre><code>function newFile(data) {
 var json = JSON.stringify(data);
 var blob = new Blob([json], {type: &quot;octet/stream&quot;});
 var url = window.URL.createObjectURL(blob);
 window.location.assign(url);
}
</code></pre>
Running the above code downloads a file instantly without a page refresh that looks like:
bfefe410-8d9c-4883-86c5-d76c50a24a1d
I want to set the filename as my-download.json instead.

JavaScript blob filename without link

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

通过window.location强制下载时，如何在JavaScript中设置blob文件的名称function newFile(data) {    var json = JSON.stringify(data);    var blob = new Blob([json], {type: "octet/stream...

问不带链接的JavaScript blob文件名
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不带链接的JavaScript blob文件名EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不带链接的JavaScript blob文件名
EN