接口下载文件

（1）直接使用一个 a 标签，其接口必须是使用 GET 请求

  1. <a href="后端文件下载接口地址" >下载文件</a>
  2. //=> 或者动态生成
  4. var aLink = document.createElement('a');
  5. aLink.href = url;
  6. aLink.click();
  7. aLink = null;

但是这样存在问题，就是在接口报错时，没有办法处理。使用这种方式必须明确接口没有问题

（2）请求之后自己生成链接或者再创建 a 标签进行手动点击

需要与后端约定，错误时，返回错误信息和标识，成功时返回流

  1. $.ajax({
  2.     url,
  3.   success(res) {
  4.       // 成功之后
  5.     // code 为 1 时返回 错误信息
  6.     if(res.code == '1') {
  7.       // res.message
  8.       return;
  9.     }
  10.     // 返回流时进行处理
  11.     // 1. 自己生成 blob 链接
  12.     var data = res.response;
  13.     var aLink = document.createElement('a');
  14.     var blob = new Blob([data]);
  15.     var blobUrl = window.URL.createObjectURL(blob);
  16.     aLink.href = url;
  17.     aLink.download = "filename"; // 这种方式必须要手动设置文件名
  18.         aLink.click();
  19.         aLink = null;
  20.     // 2. 创建 a 标签手动点击
  21.     var aLink = document.createElement('a');
  22.         aLink.href = url;
  23.         aLink.click();
  24.         aLink = null;
  25.   },
  26.   error(err) {
  27.     // err
  28.   }
  29. })

保存文本数据为 JSON、TXT、HTML 等文件

  1. function saveAsJson(data) {
  2.   let blob = new Blob([JSON.stringify(data)], { type: "" });
  3.   let alink = document.createElement("a");
  4.   alink.id = "download";
  5.   alink.href = URL.createObjectURL(blob);
  6.   alink.setAttribute('download', 'data.json');
  7.   alink.click();
  8.   alink = null;
  9. }

保存 SVG 为 PNG

  1. function saveAsPng(svg) {
  2.   var serializer = new XMLSerializer();
  3.   var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svg);
  4.   var image = new Image;
  5.   image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
  6.   var canvas = document.createElement("canvas");
  7.   canvas.width = svg.width;
  8.   canvas.height = svg.width;
  9.   var context = canvas.getContext("2d");
  10.   context.fillStyle = '#fff';//#fff设置保存后的PNG 是白色的
  11.   context.fillRect(0, 0, 10000, 10000);
  12.   image.onload = function() {
  13.     context.drawImage(image, 0, 0);
  14.     var a = document.createElement("a");
  15.     a.download = "name.png";
  16.     a.href = canvas.toDataURL("image/png");
  17.     a.click();
  18.   };
  19. }

上传特定文件

只需要设定 input 框的 accept 属性即可：值为字符串。

可以指定特定的后缀：

  1. <input type="file" accept=".jpg,.jpeg,.png,.gif" /> // 指定后缀

也可以指定类型：

  1. <input id="fileId1" type="file" accept="image/png,image/gif" name="file" /> // png 和 gif 图片
  2. <input type="file" accept="image/*" /> // 所有图片

即值为 MIME 类型，多个可以使用逗号隔开。

常用的 MIME 类型

  1. 后缀名       MIME名称
  2. *.3gpp    audio/3gpp, video/3gpp
  3. *.ac3    audio/ac3
  4. *.asf       allpication/vnd.ms-asf
  5. *.au           audio/basic
  6. *.css           text/css
  7. *.csv           text/csv
  8. *.doc    application/msword    
  9. *.dot    application/msword    
  10. *.dtd    application/xml-dtd    
  11. *.dwg    image/vnd.dwg    
  12. *.dxf      image/vnd.dxf
  13. *.gif            image/gif    
  14. *.htm    text/html    
  15. *.html    text/html    
  16. *.jp2            image/jp2    
  17. *.jpe       image/jpeg
  18. *.jpeg    image/jpeg
  19. *.jpg          image/jpeg    
  20. *.js       text/javascript, application/javascript    
  21. *.json    application/json    
  22. *.mp2    audio/mpeg, video/mpeg    
  23. *.mp3    audio/mpeg    
  24. *.mp4    audio/mp4, video/mp4    
  25. *.mpeg    video/mpeg    
  26. *.mpg    video/mpeg    
  27. *.mpp    application/vnd.ms-project    
  28. *.ogg    application/ogg, audio/ogg    
  29. *.pdf    application/pdf    
  30. *.png    image/png    
  31. *.pot    application/vnd.ms-powerpoint    
  32. *.pps    application/vnd.ms-powerpoint    
  33. *.ppt    application/vnd.ms-powerpoint    
  34. *.rtf            application/rtf, text/rtf    
  35. *.svf           image/vnd.svf    
  36. *.tif         image/tiff    
  37. *.tiff       image/tiff    
  38. *.txt           text/plain    
  39. *.wdb    application/vnd.ms-works    
  40. *.wps    application/vnd.ms-works    
  41. *.xhtml    application/xhtml+xml    
  42. *.xlc      application/vnd.ms-excel    
  43. *.xlm    application/vnd.ms-excel    
  44. *.xls           application/vnd.ms-excel    
  45. *.xlt      application/vnd.ms-excel    
  46. *.xlw      application/vnd.ms-excel    
  47. *.xml    text/xml, application/xml    
  48. *.zip            aplication/zip    
  49. *.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

读取文件内容

当文件上传成功后，使用 FileReader 来读取文件内容：

  1. input.addEventListener('change', (e) => {
  2.   let reader = new FileReader();
  3.   reader.readAsText(e.target.files[0], "UTF-8");
  4.   reader.onload = (ev) => {
  5.     let result = ev.target.result;
  6.   }
  7. })