文件下载相关

• 相关包
  • word下载：
    https://github.com/eligrey/FileSaver.js
    jquery.wordexport.js

*pdf下载
https://github.com/bpampuch/pdfmake
https://github.com/MrRio/jsPDF

• 原理：通过blob + FileReader + a.download 进行下载。
• 实现：

  let a = document.createElement('a')
  a.href = 'http://...' || URL.createObjectURL(new Blob(file, option))
  a.download = 'name.doc'
  a.click()

• 知识点概述:

  • 设置content-type: application/octet-stream; 二进制流文件，主要用来下载
    可以是drag的dataTransfer, HTMLCanvasElement的mozGetAsFile，或者input的fileList

  • FileReader

    • 可以读取文件file或者blob指定的文件或者数据（可以是图片预览）

    • 使用：

      var reader = new FileReader()
      reader.readAsBinaryString() // 二进制为二进制
      reader.readAsText(file, 'utf-8') // 二进制为文本
      reader.readAsDataURL() // 二进制为DataURL
      reader.abort //中断读取操作

    • 方法：

      reader.onload = function () {
      console.log(this.result) // 读取后的文件
      }
      reader.onabort
      reader.onerror
      reader.onloadend
      reader.onloadstart
      reader.onprogress

  • blob

    var debug = {hello: "world"};
    var blob = new Blob([JSON.stringify(debug, null, 2)],
    {type : 'application/json'});
    读取内容必须要用FileReader，创建url使用URL.createObjectURL,就可以把url赋值给img的src或者a的href。

    • blob.type

    • blob.size

  • window.URL.createObjectURL
    创建一个包含参数对象的url

  • document.createElementNS(namespaceURI, qualifiedName[, options]);
    和crateElement不同的是，指定了命名空间的URI