根据图片的URL生成PDF保存到本地(前台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; //调用回调函数
};
}

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

时间: 2024-08-30 09:49:20

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

将页面内容保存为图片显示,长按保存至本地(html2canvas)

加载的html2canvas为官网上的新版本. style样式: *{ margin: 0;padding: 0; font-family: "微软雅黑"; } html,body{ width: 100%; } #capture,#imgDiv{ width: 100%; } .imgDiv_img{ width: 100%; } html: <div id="capture" style="padding: 10px; background: #

帝国cms使用火车头采集图片发布怎么取消远程保存到本地

帝国cms怎么取消远程保存图片呢? 1.帝国cms设置远程保存图片的方法,后台修改 修改字段 找到以下代码 关键字替换 <input name="copyimg" type="checkbox" id="copyimg" value="1"> 远程保存图片( <input name="mark" type="checkbox" id="mark" v

爬虫任务二:爬取(用到htmlunit和jsoup)通过百度搜索引擎关键字搜取到的新闻标题和url,并保存在本地文件中(主体借鉴了网上的资料)

采用maven工程,免着到处找依赖jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd&qu

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api. DATA ls_appl_object TYPE gos_s_obj. DATA lo_gos_api TYPE REF TO cl_gos_api. DATA lt_attachment_list TYPE gos_t_atta. DATA lt_role_filter TYPE gos_t_rol. DATA: lv_

使用webdriver + phantomjs + pdfkit 生成PDF文件

实例 #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on Dec 6, 2013 @author: Jay <[email protected]> @description: use PhantomJS to parse a web page to get the geo info of an IP ''' import datetime import urllib # from pyquery import PyQuery as

生成PDF的几种方式

1.后台生成PDF thinkphp利用MPDF插件 示例代码: public function pdf(){ //引入类库 Vendor('mpdf.mpdf'); //设置中文编码 $mpdf=new \mPDF('zh-cn','A4', 0, '宋体', 0, 0); //html内容 $html='<h1><a name="top"></a>一个PDF文件</h1>'; $mpdf->WriteHTML($html); $

MVC 生成PDf表格并插入图片

最近做的项目中有一个功能,将最终的个人信息生成PDF表格,并插入图片.对于没接触过的程序员来说回一片茫然,网上有多种生成PDf的方法,我给大家介绍一下我认为比较简单,好操作的一种. iTextSharp组件 使用方法. 1,引入itextsharp.dll 2,  引入命名空间 ? 1 2 3 using iTextSharp; using iTextSharp.text; using iTextSharp.text.pdf; ? 1 2 3 4 5 6 7 8 9 10 11 12     D

【Java】itext根据模板生成pdf(包括图片和表格)

1.导入需要的jar包:itext-asian-5.2.0.jar itextpdf-5.5.11.jar. 2.新建word文档,创建模板,将文件另存为pdf,并用Adobe Acrobat DC打开编辑,点击右侧[准备表单]后点击[开始] 3.在需要插入数据的空白处,右击,点击[文本域],将文本域拖放到你想要的位置,更改域名称为你传入的变量名. 4.保存文件,将文件放到项目中.生成pdf代码如下: 1 public static void creatPdf(Map<String, Objec

asp.net.web如何简单生成和保存二维码图片的例子

首先,要有生成二维码图片,需要二维码生成的类库,到官网下载thoughtWorks.QRCode.dll 例子的步骤: 1.创建项目QRCodeTest1,选择asp.net.web窗体应用程序 2.添加引用,引入支持生成二维码图片类库,thoughtWorks.QRCode.dll 3.右键项目QRCodeTest1,选择添加web窗体,生成WebForm1.aspx, 并添加新文件夹photos,存放生成的二维码图片 4.打开webForm1.aspx,可以选择两种方式编写页面(熟悉的话,用