@shixinde/vuepress-theme-init/docs/assets/vue.js 下载文件.html-B1uCoFDS.js

### 其他开源项目

import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},e=p(`<h1 id="下载" tabindex="-1"><a class="header-anchor" href="#下载"><span>下载</span></a></h1><h2 id="下载blob文件流" tabindex="-1"><a class="header-anchor" href="#下载blob文件流"><span>下载blob文件流</span></a></h2><blockquote><h3 id="前端下载后台返回的文件流-诸如以下" tabindex="-1"><a class="header-anchor" href="#前端下载后台返回的文件流-诸如以下"><span>前端下载后台返回的文件流 ，诸如以下：</span></a></h3><p>g����^� 6�p��U���r΀%�좃����/�I�|�Rˤ��:f����~ ��mF�v����ׯ������p9HB�SyݵK~�����PK \b�;��</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> binaryData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>
<span class="line">binaryData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 指定文件编码方式为 utf-8</span></span>
<span class="line"><span class="token keyword">const</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span>binaryData<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;application/vnd.ms-excel;charset=utf-8&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 获取blob链接</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>Url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span></span>
<span class="line">window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>Url<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="下载xml文件" tabindex="-1"><a class="header-anchor" href="#下载xml文件"><span>下载XML文件</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&#39;axios&#39;</span></span>
<span class="line"></span>
<span class="line"><span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&#39;/dev-api/standarInterface/archives/&#39;</span> <span class="token operator">+</span> row<span class="token punctuation">.</span>id<span class="token punctuation">,</span></span>
<span class="line">    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&#39;GET&#39;</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token literal-property property">responseType</span><span class="token operator">:</span> <span class="token string">&#39;blob&#39;</span><span class="token punctuation">,</span> <span class="token comment">// important</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">const</span> url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>response<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">const</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    link<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span></span>
<span class="line">    link<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;download&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;file.xml&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="下载excel" tabindex="-1"><a class="header-anchor" href="#下载excel"><span>下载excel</span></a></h2><blockquote><p>一定要加这个不然会乱码 <code>responseType:&#39;blob&#39;,</code></p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 导出文件</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">exportTemplate</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&#39;/statistics/completion/exportTemplate&#39;</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&#39;get&#39;</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token literal-property property">responseType</span><span class="token operator">:</span><span class="token string">&#39;blob&#39;</span><span class="token punctuation">,</span></span>
<span class="line">        params</span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">   <span class="token keyword">const</span> url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>res<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">      <span class="token keyword">const</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">      link<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span></span>
<span class="line">      link<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&#39;download&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;非投资与建设项目招标完成情况表.xlsx&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">      link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="或者使用这种方式" tabindex="-1"><a class="header-anchor" href="#或者使用这种方式"><span>或者使用这种方式</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>res<span class="token punctuation">.</span>data<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;application/vnd.ms-excel;charset=utf-8&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 获取临时URL</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>Url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 下载文件</span></span>
<span class="line"><span class="token keyword">const</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>Url<span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span>download <span class="token operator">=</span> <span class="token string">&#39;data.xlsx&#39;</span><span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 清理临时资源</span></span>
<span class="line">window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">revokeObjectURL</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>Url<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="导出pdf" tabindex="-1"><a class="header-anchor" href="#导出pdf"><span>导出PDF</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">exportPdf</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">settleNumber</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>resultData<span class="token punctuation">.</span>settleNumber <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 获取blob链接</span></span>
<span class="line"><span class="token keyword">const</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>res<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;application/pdf;charset=UTF-8&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 获取临时URL</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>Url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 下载文件</span></span>
<span class="line"><span class="token keyword">const</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>Url<span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span>download <span class="token operator">=</span> <span class="token string">&#39;结算单商品明细(&#39;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>resultData<span class="token punctuation">.</span>inTime <span class="token operator">+</span> <span class="token string">&#39;).xlsx&#39;</span><span class="token punctuation">;</span></span>
<span class="line">link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 清理临时资源</span></span>
<span class="line">window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">revokeObjectURL</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>Url<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,14),c=[e];function l(o,i){return a(),s("div",null,c)}const r=n(t,[["render",l],["__file","vue.js 下载文件.html.vue"]]),k=JSON.parse(`{"path":"/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vue.js%20%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6.html","title":"vue 下载","lang":"zh-CN","frontmatter":{"title":"vue 下载","date":"2024-5-21","tags":["vue","下载","Excel下载"],"categories":["自学篇"]},"headers":[{"level":2,"title":"下载blob文件流","slug":"下载blob文件流","link":"#下载blob文件流","children":[]},{"level":2,"title":"下载XML文件","slug":"下载xml文件","link":"#下载xml文件","children":[]},{"level":2,"title":"下载excel","slug":"下载excel","link":"#下载excel","children":[]},{"level":2,"title":"或者使用这种方式","slug":"或者使用这种方式","link":"#或者使用这种方式","children":[]},{"level":2,"title":"导出PDF","slug":"导出pdf","link":"#导出pdf","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/vue.js 下载文件.md","excerpt":"\\n<h2>下载blob文件流</h2>\\n<blockquote>\\n<h3>前端下载后台返回的文件流 ，诸如以下：</h3>\\n<p>g����^�\\f6�p�\\u0003�U���r΀%�좃��\\u001d��/\\u0003�\\u0003I�|�Rˤ��:f����~\\f��mF�v����ׯ������p9HB�Sy\\u001dݵK~\\u0004�\\u0018����PK \\b�\\u0003;��</p>\\n</blockquote>\\n<div class=\\"language-javascript\\" data-highlighter=\\"prismjs\\" data-ext=\\"js\\" data-title=\\"js\\"><pre class=\\"language-javascript\\"><code><span class=\\"line\\"><span class=\\"token keyword\\">const</span> binaryData <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">[</span><span class=\\"token punctuation\\">]</span></span>\\n<span class=\\"line\\">binaryData<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">push</span><span class=\\"token punctuation\\">(</span>res<span class=\\"token punctuation\\">.</span>data<span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token comment\\">// 指定文件编码方式为 utf-8</span></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">const</span> blob <span class=\\"token operator\\">=</span> <span class=\\"token keyword\\">new</span> <span class=\\"token class-name\\">Blob</span><span class=\\"token punctuation\\">(</span>binaryData<span class=\\"token punctuation\\">,</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token literal-property property\\">type</span><span class=\\"token operator\\">:</span> <span class=\\"token string\\">'application/vnd.ms-excel;charset=utf-8'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token comment\\">// 获取blob链接</span></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>Url <span class=\\"token operator\\">=</span> window<span class=\\"token punctuation\\">.</span><span class=\\"token constant\\">URL</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">createObjectURL</span><span class=\\"token punctuation\\">(</span>blob<span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\">window<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">open</span><span class=\\"token punctuation\\">(</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>Url<span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{r as comp,k as data};