前端网页直接实现文件的下载功能

网页实现文件的下载功能

• 以往下载的功能都是后端给的一个下载的连接
• 随着前端技术的发展，前端可以直接导出简单的文件，通过canvas可以实现截屏导出图片
• 这里只记录如何使用post请求配合后端实现文件的下载
  • 不要用ajax之类的请求，会把内容直接请求回来，且文件是二进制的，导致乱码显示。
  • 如果是 get 请求，那直接换成 window.open(url) 就行了，不喜欢开新窗口的话，创建一个隐藏的 iframe，把 iframe 的 src 指向这个 url，就可以下载了（貌似直接赋值给 window.location.href 也是可以的，当前页不会跳走）。
  • 如果是 post 请求，那创建一个 form，target 指向这个 iframe。让后台加一个文件下载的 http response header Content-Disposition: attachment; filename=“filename.xlsx”， 浏览器自己会处理文件下载的。
• 实现form请求的方法，基于react实现

  setFormPost (data) {
   let divDom = document.gertElementById("downloadDiv");
   if (data) {
   ReactDom.render(
     <form action= {url} method="post">
       <input name="data" type="text" value={data}/>
      </form>,
      divDom
     )
     ReactDom.findDomNode(divDom).querySelector("form").submit();
     ReactDom.unmountComponentAtNode(divDom);
   }
  }