1. 程式人生 > >根據圖片的URL生成PDF保存到本地(前臺js)

根據圖片的URL生成PDF保存到本地(前臺js)

避免 就會 需要 uri con bug 是個 tput llb

//需要引用html2canvas.js和jspdf.js

SavePDF:function(e){
var that = this;
$.post("/Biz/DailyExpenseApply/GetpictureToPDF?expenseApplyId=" + this.expenseApply.ExpenseApplyID,function(res){
_.each(res,function(m){
getBase64(m.FileUrl,(dataURL)=>{
debugger
// 三個參數,第一個方向,第二個單位,第三個尺寸格式
var doc = new jsPDF(‘landscape‘,‘pt‘,[205, 115])

// 將圖片轉化為dataUrl
var imageData = dataURL;

doc.addImage(imageData, ‘PNG‘, 0, 0, 205, 115);
doc.save(m.DOCNAME+‘.pdf‘);
//var base64str = doc.output("datauristring");

});

})
})
},

function getBase64(url,callback){//獲取圖片url的地址轉換成base64
//通過構造函數來創建的 img 實例,在賦予 src 值後就會立刻下載圖片,相比 createElement() 創建 <img> 省去了 append(),也就避免了文檔冗余和汙染
var Img = new Image(),
dataURL=‘‘;
Img.src=url;
Img.onload=function(){ //要先確保圖片完整獲取到,這是個異步事件
var canvas = document.createElement("canvas"), //創建canvas元素
width=Img.width, //確保canvas的尺寸和圖片一樣
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //將圖片繪制到canvas中
debugger
dataURL=canvas.toDataURL(‘image/jpeg‘); //轉換圖片為dataURL
callback?callback(dataURL):null; //調用回調函數
};
}

根據圖片的URL生成PDF保存到本地(前臺js)