分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

根据图片的URL生成PDF保存到本地(前台js)

发布时间:2023-09-06 01:47责任编辑:白小东关键词:js

//需要引用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)

原文地址:https://www.cnblogs.com/jiangcm/p/8657781.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved