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