前端預覽和下載圖片/文檔的幾種方法

瀏覽器下載文件主要還是看文件保存的時候有沒有設置正確的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);
}

流預覽、流轉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)
    }
}