前端预览和下载图片/文档的几种方法

浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type，有的话浏览器访问url时会自动打开该文件将内容显示在页面上，前提时浏览器本身能识别这个文件类型，比如图片/文档/文本等，否则浏览器则会默认直接下载该文件。。。当然如果后端能直接返回文件流（bolb类型）的话就好处理了）

用js实现强制下载图片（经测试IE全版本不支持）：

downloadIamge(imgsrc, name) {//下载图片
   let image = new Image();
   image.src = imgsrc;
   // 解决跨域 Canvas 污染问题
   image.setAttribute("crossOrigin", "anonymous");
   image.onload = function() {
       let canvas = document.createElement("canvas");
       canvas.width = image.width;
       canvas.height = image.height;
       let context = canvas.getContext("2d");
       context.drawImage(image, 0, 0, image.width, image.height);
       let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
       let a = document.createElement("a"); // 生成一个a元素
       a.download = name; // 设置图片名称
       a.href = url; // 将生成的URL设置为a.href属性
       a.click()
   }
}

预览PDF(此链接也是pdf.js实现)：

let a = document.createElement('a')
a.target = "_blank"
a.href = 'http://mozilla.github.io/pdf.js/web/viewer.html?file='+fileUrl
document.body.appendChild(a)
a.click()

预览文档（利用微软提供的方案）：

let a = document.createElement('a')
a.target = "_blank"
a.href = 'https://view.officeapps.live.com/op/view.aspx?src='+fileUrl
document.body.appendChild(a)
a.click()
/*这个文件地址需满足以下几个条件：
（1）在浏览器是可以访问的；
（2）需域名访问，IP无效；
（3）访问端口为80；*/

html内容导出为PDF：

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import moment from 'moment'
//分页
export default (title, id)=> {
    var element = document.getElementById(id)
    element.scrollIntoView(true)
    window.scrollTo(0, 0);
    setTimeout(() => {
      html2Canvas(element).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        var padding = 10
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 592.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new JsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', padding, padding, imgWidth-padding*2, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', padding, position, imgWidth-padding*2, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save(title + moment(Date.now()).format('YYYY-MM-DD') + '.pdf');
      });
    }, 0);
}
//不分页
const exportPDF = (title, id)=> {
    var element = document.getElementById(id)
    element.scrollIntoView(true)
    window.scrollTo(0, 0);
    setTimeout(() => {
      html2Canvas(element).then(function(canvas) {
        let scale = 2
        const contentWidth = canvas.width / scale
        const contentHeight = canvas.height / scale
        const pdf = new JsPDF('', 'pt', [contentWidth, contentHeight])
        const pageData = canvas.toDataURL('image/jpeg', 1.0)

        pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
        pdf.save(title + '.pdf')
      });
    }, 0);
}
// export default exportPDF
Vue.prototype.$exportPDF = exportPDF

流预览、流转base64预览

后端直接返回文件类型，前端请求加一个responseType: 'blob'，得到blob对象：

callback: (res)=>{
   if(res){
          let blob = new Blob([res], {type: "application/pdf"})
          //1.将blob转base64通过内嵌iframe预览
          var reader = new FileReader()
          reader.readAsDataURL(blob);
          reader.onload = function(){
             console.log(reader.result); 
             sessionStorage.PDF = reader.result
             window.open('/PDFviewer')
          };
          //2.直接预览
          if (window.navigator && window.navigator.msSaveOrOpenBlob){
              window.navigator.msSaveOrOpenBlob(blob,'');
          }else{
              window.open(window.URL.createObjectURL(blob))
          }
    }else{
        message.warning(res.msg)
    }
}
async downloadFn() {//下载
   let res = await this.$store.dispatch('cpcenter/resumeDownload',{id: this.id})
   // response.setHeader("FileName", URLEncoder.encode(fileName, "UTF-8")) 后台
   let fileName = decodeURI(res.headers['filename'])
   let blob = new Blob([res.data], {type: "application/pdf"})
   if (window.navigator && window.navigator.msSaveOrOpenBlob){
          // window.navigator.msSaveOrOpenBlob(blob,'')
          window.navigator.msSaveBlob(blob, fileName);
   }else{
          let url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
   }
}