javascript - 设置默认的另存为名称或者 that uses a Blob</a></h1> <div class="ml12 aside-cta flex--item print:d-none sm:ml0 sm:mb12 sm:order-first sm:as-end"> <a href="https://stackoverflow.com/questions/ask" target="_blank" class="ws-nowrap s-btn s-btnprimary">问问题</a></div> </div> <div class="d-flex fw-wrap pb8 mb16 bb bc-black-075"> <div class="flex--item ws-nowrap mr16 mb8"> <span class="fc-light mr2"></span> </div> <div class="flex--item ws-nowrap mr16 mb8" title="2022-04-17 15:46:40Z"> <span class="fc-light mr2">问问题</span> <time itemprop="dateCreated" datetime="2017-05-19T04:15:02.643">2017-05-19T04:15:02.643</time> </div> <div class="flex--item ws-nowrap mb8" title="Viewed 6 times"> <span class="fc-light mr2"></span> 16204 次 </div> </div> <div id="mainbar" role="main" aria-label="question and answers"> <div class="question" data-questionid="4" data-position-on-page="0" data-score="763" id="question"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="4"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-peeufs8c"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button> <div id="--stacks-s-tooltip-peeufs8c" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This question shows research effort; it is useful and clear<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value=""> 7 </div> <button class="js-vote-down-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-04106eqn"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button><div id="--stacks-s-tooltip-04106eqn" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This question does not show any research effort; it is unclear or not useful<div class="s-popover--arrow"></div></div> <div id="--stacks-s-tooltip-tgvwendx" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">Bookmark this question.<div class="s-popover--arrow"></div></div> <a class="js-post-issue flex--item s-btn s-btnunset c-pointer py6 mx-auto" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-abwmy15k"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4h3L3 9Zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5Z"></path></svg></a><div id="--stacks-s-tooltip-abwmy15k" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <p>I am generating a PDF in the browser using PDFKit (without node) and displaying it an iframe or an embed tag via the src attribute. The generated blob URL is some kind of UUID. So the overall page looks like:</p>

<pre><code><embed src="blob:http://localhost/eeaabb..."/>
</code></pre>

<p>The PDF appears fine, but when I click the Download link in Chrome, the default file name is the UUID. In FireFox, it is just "document.pdf". </p>

<p>If this were a server-generated PDF I would use Content-Disposition and/or manipulate the URL so the last part of it is the name I want, but that doesn't seem possible with a client-generated object.</p>

<p>Things I have tried:</p>

<ul>
<li>Setting the PDF title via the metadata. This works but doesn't affect the filename.</li>
<li>Manipulating the embed tag title attribute. Doesn't seem to do anything.</li>
<li>Change the page title. Doesn't affect the file.</li>
<li>Try to append something to the data url. Just prevents the PDF from displaying.</li>
<li>Upload the PDF via POST, then download it via a page where I can control the URL. Could work, but seems crazy to generate a client-side PDF only to have to upload it to the server.</li>
</ul>

<p>Is there any way around this so that I can control the default/suggested file name? </p>
 </div> <div class="mt24 mb12"> <div class="post-taglist d-flex gs4 gsy fd-column"> <div class="d-flex ps-relative fw-wrap"> <a href="/tags/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a><a href="/tags/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a><a href="/tags/pdf" class="post-tag js-gps-track" title="show questions tagged 'pdf'" rel="tag">pdf</a><a href="/tags/node-pdfkit" class="post-tag js-gps-track" title="show questions tagged 'node-pdfkit'" rel="tag">node-pdfkit</a> </div> </div> </div> </div> <span class="d-none" itemprop="commentCount">4</span> </div> </div> <div class="js-zone-container zone-container-responsive"> <div id="dfp-isb" class="everyonelovesstackoverflow everyonelovesinline-sidebar mx-auto" style="min-height: auto; height: auto; display: none;"></div> <div class="js-report-ad-button-container mx-auto" style="width: 300px"></div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader d-flex ai-center mb8"> <div class="flex--item fl1"> <h2 class="mb0" data-answercount=""> 2 回答 <span style="display:none;" itemprop="answerCount">2</span> </h2> </div> </div> </div> <a name="7"></a> <div id="answer-7" class="answer js-answer accepted-answer" data-answerid="7" data-parentid="4" data-score="506" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-dgvag2l3"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button><div id="--stacks-s-tooltip-dgvag2l3" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="2"> 2 </div> <button class="js-vote-down-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-gn8ppsfv"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button> </div> </div> <div class="answercell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <hr> <hr> <p><em>注意：</em><br> 此答案已过时。<br> 下面描述的行为自发布以来确实发生了变化，并且将来可能仍会发生变化。<br> 由于这个问题已经在其他地方被问过，并且得到了更好的回答，我邀请您阅读这些内容：<a href="https://stackoverflow.com/questions/53548182/can-i-set-the-filename-of-a-pdf-object-displayed-in-chrome">我可以设置在 Chrome 中显示的 PDF 对象的文件名吗？</a></p> <hr> <hr> <p>我还没有找到 chrome 的默认插件。<br> 不过，我有一些适用于 Firefox 的东西<code>download.pdf</code>，出于某种奇怪的原因，它会默认使用 chrome...</p> <p>通过以以下形式传递 dataURI</p> <pre><code>'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...' </code></pre> <p>Firefox 接受 FILE_NAME 作为文件名，但 chrome 不...</p> <hr> <p><strong>一个<a href="http://plnkr.co/edit/zEGPcVn6ZbMnlTw1ySRw?p=preview" rel="nofollow noreferrer">plnkr</a></strong>在 chrome中显示更好<code>download.pdf</code>，它不喜欢嵌套的 iframe...</p> <p>还有一个仅适用于 FF 的片段：</p> <p></p><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>const FILE_NAME = 'myCoolFileName.pdf'; const file_header = ';headers=filename%3D'; fetch('https://dl.dropboxusercontent.com/s/rtktu1zwurgd43q/simplePDF.pdf?dl=0').then(r => r.blob()) .then(blob=>{ const f = new FileReader(); f.onload = () => myPdfViewer.src = f.result.replace(';', file_header + encodeURIComponent(FILE_NAME) + ';'); f.readAsDataURL(blob); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><iframe id="myPdfViewer" width="500" height="500"></iframe></code></pre> </div> </div> <p></p> <p>但请注意，如果它对您来说真的很重要，您当然不能依赖浏览器自己的插件，而使用例如<a href="https://mozilla.github.io/pdf.js/" rel="nofollow noreferrer">Mozilla 的 PDF.js</a>，您将获得扩展控制。</p> </div> <div class="mt24"> <div class="user-action-time" style="color:#999;text-align:right;">于 2017-05-19T05:12:35.893 回答</div> </div> </div> </div> </div><a name="7"></a> <div id="answer-7" class="answer js-answer accepted-answer" data-answerid="7" data-parentid="4" data-score="506" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container d-flex jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7"> <button class="js-vote-up-btn flex--item s-btn s-btnunset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-dgvag2l3"> <svg aria-hidden="true" class="svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z"></path></svg> </button><div id="--stacks-s-tooltip-dgvag2l3" class="s-popover s-popovertooltip pe-none" aria-hidden="true" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div> <div class="js-vote-count flex--item d-flex fd-column ai-center fc-black-500 fs-title" itemprop="upvoteCount" data-value="2"> 2 </div> <button class="js-vote-down-btn flex--item s-btn s-btn__unset c-pointer " data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary" data-unselected-classes="" aria-describedby="--stacks-s-tooltip-gn8ppsfv"> <svg aria-hidden="true" class="svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 11h32L18 27 2 11Z"></path></svg> </button> </div> </div> <div class="answercell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"> <blockquote> <p>有什么办法可以让我控制这个名字吗？</p> </blockquote> <p>不可以。您无法控制存储在用户本地文件系统中的文件的名称。</p> <p>您可以使用将属性设置为建议文件名的<code><a></code>元素。<code>download</code>如果用户选择下载提供的文件，用户可以在下载文件之前或之后随时更改文件名。</p> <p></p><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>window.onload = () => { let blob = new Blob(["file"], { type: "text/plain" }); let url = URL.createObjectURL(blob); let a = document.createElement("a"); a.href = url; a.download = "file.txt"; document.body.appendChild(a); console.log(url); a.click(); }</code></pre> </div> </div> <p></p> <p>在 chrome、chrome 浏览器中，您可以使用<code>requestFileSystem</code>store或at将文件写入浏览器配置目录或用户操作系统中的其他目录。看<code>Blob</code><code>File</code><code>Directory</code><code>LocalFileSystem</code></p> <ul> <li><a href="https://stackoverflow.com/questions/36098129/how-to-write-in-file-user-directory-using-javascript/">如何使用 JavaScript 写入文件（用户目录）？</a></li> <li><a href="https://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol/">jQuery File Upload Plugin：是否可以保留上传文件夹的结构？</a></li> <li><a href="https://stackoverflow.com/questions/38239361/where-is-blob-binary-data-stored?">Blob 二进制数据存储在哪里？</a></li> </ul> </div> <div class="mt24"> <div class="user-action-time" style="color:#999;text-align:right;">于 2017-05-19T04:18:30.987 回答</div> </div> </div> </div> </div></div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-related"> <h4 id="h-related">Related</h4> <div class="related js-gps-related-questions" data-tracker="rq=1"> <div class="spacer"> <a href="/questions/10129613" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">3</div> </a> <a href="/questions/10129613" class="question-hyperlink">jquery - 尽管 style='display:none' 可以在 IE 中选择隐藏文本</a> </div><div class="spacer"> <a href="/questions/10129616" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">3</div> </a> <a href="/questions/10129616" class="question-hyperlink">sql - 反转/吹灭 GROUP BY</a> </div><div class="spacer"> <a href="/questions/10129617" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/10129617" class="question-hyperlink">json - node.js 的 Json 解析问题</a> </div><div class="spacer"> <a href="/questions/10129618" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">1</div> </a> <a href="/questions/10129618" class="question-hyperlink">ios - Air for iOS - 如何处理因内存有限而导致的崩溃？</a> </div><div class="spacer"> <a href="/questions/10129619" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/10129619" class="question-hyperlink">oracle - 获取 oci_execute() 错误的错误消息 (PHP)</a> </div><div class="spacer"> <a href="/questions/10129622" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">3</div> </a> <a href="/questions/10129622" class="question-hyperlink">matlab - 在 Matlab 中禁用绘图</a> </div><div class="spacer"> <a href="/questions/10129623" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">3</div> </a> <a href="/questions/10129623" class="question-hyperlink">c# - 唯一文件标识符</a> </div><div class="spacer"> <a href="/questions/10129624" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/10129624" class="question-hyperlink">c# - 将“所有人”权限添加到文件夹的网络共享</a> </div><div class="spacer"> <a href="/questions/10129627" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">2</div> </a> <a href="/questions/10129627" class="question-hyperlink">php - Paypal 自适应链式支付 - 发件人的金额是主要收款人的金额，而不是总金额。怎么修？</a> </div><div class="spacer"> <a href="/questions/10129629" title="Question score (upvotes - downvotes)"> <div class="answer-votes large">0</div> </a> <a href="/questions/10129629" class="question-hyperlink">spring - 如何在java类中使用appicationcontextaware</a> </div> </div> </div> <div class="module js-gps-related-tags" id="related-tags"> <h4 id="h-related-tags">Reference</h4> <div data-name="javascript"> <a href="https://php.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">php</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1429865</span> </span> </div> <div data-name="javascript"> <a href="https://c-cpp.com" class="post-tag no-tag-menu js-gps-track" target="_blank">c/c++</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">756500</span> </span> </div> <div data-name="javascript"> <a href="https://nginx.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">nginx</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49975</span> </span> </div> <div data-name="javascript"> <a href="https://mongodb.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">mongodb</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">159057</span> </span> </div> <div data-name="javascript"> <a href="https://mybatis.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">mybatis</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">3233</span> </span> </div> <div data-name="javascript"> <a href="https://anaconda.org.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">anaconda</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">13410</span> </span> </div> <div data-name="javascript"> <a href="https://pycharm.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">pycharm</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">14671</span> </span> </div> <div data-name="javascript"> <a href="https://python.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">python</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1902243</span> </span> </div> <div data-name="javascript"> <a href="https://vscode.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">vscode</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">56040</span> </span> </div> <div data-name="javascript"> <a href="https://dockerdocs.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">docker</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">110988</span> </span> </div> <div data-name="javascript"> <a href="https://github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">github</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49000</span> </span> </div> <div data-name="javascript"> <a href="https://flask.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">flask</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49129</span> </span> </div> <div data-name="javascript"> <a href="https://ffmpeg.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">ffmpeg</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">24037</span> </span> </div> <div data-name="javascript"> <a href="https://jmeter.net" class="post-tag no-tag-menu js-gps-track" target="_blank">jmeter</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">16910</span> </span> </div> <div data-name="javascript"> <a href="https://matplotlib.net" class="post-tag no-tag-menu js-gps-track" target="_blank">matplotlib</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">63493</span> </span> </div> <div data-name="javascript"> <a href="https://getbootstrap.net" class="post-tag no-tag-menu js-gps-track" target="_blank">bootstrap</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">54641</span> </span> </div> </div> </div> </div> </div> </div> </div> <footer id="footer" class="site-footer js-footer" role="contentinfo"> <div class="site-footer--container"> <div class="site-footer--logo"> <a href="https://stackoverflow.com"><svg aria-hidden="true" class="native svg-icon iconLogoGlyphMd" width="32" height="37" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="#BCBBBB"/><path d="m21.5 0-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4 13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="#F48024"/></svg></a> </div> <nav class="site-footer--nav"> <div class="site-footer--col"> <h5 class="-title"><a href="https://stackoverflow.org.cn" class="js-gps-track" data-gps-track="footer.click({ location: 3, link: 15})">Stack Overflow 中文网</a></h5> <p>遵从 CC BY-SA 知识共享许可协议。</p> </div> </nav> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?709ff2ad9744e86b5b0eee677fc13ede"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1MW5BV8G8E"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-1MW5BV8G8E'); </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> </body> </html>