当前位置:网站首页>jsPDF生成PDF文件,文件不全问题,后台进行文件下载,前台不下载
jsPDF生成PDF文件,文件不全问题,后台进行文件下载,前台不下载
2022-07-25 09:17:00 【zk_Kang】
我是前端使用jsPDF进行生成PDF文件,使用Base64进行加密,解密;后台进行文件流下载
1.前端使用jsPDF和html2canvas进行生成PDF文件(当然有这同样的毛病,生成时候有滚动条的情况下,内容会丢失,我这里使用的是网上很多人的一种思路,把要进行生成的标签,进行复制一份,对这个复制了的对象进行操作,就不会丢失内容了。并且,这里没有让用户在前台页面进行下载,这里是直接进行传递到后台进行后台自动下载。)
@这里主要用到了两个js,一个是html2canvas.js;一个是jsPDF.js;两个文件必须要引用
(文件可以网上自己下载,我这里也是网上随便找的,如果没找到,可以联系我,我发给你)

主要就是使用到jsPDF.output()//这个方法,进行传递后台解密,文件流下载(这里的我操作的是一个div,给div起一个id就可以了,这里还要说一下,这个背景必须要换,它默认黑色,自己试试就知道了)

function onclick()
{
var targetDom = $("#JSDDGSDAFAS_id");
var copyDom = targetDom.clone();
copyDom.addClass('super');
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom);
copyDom.css({ "background": "#FFFFFF" });
html2canvas(copyDom, {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
//返回图片URL,参数:图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
//pdf.save('pdf.pdf');//调用这个就是直接在前台进行下载
//去掉前面的字符串后,就是文件的加密字符串
var datauri = pdf.output('dataurlstring');
var base64 = datauri.substring(28); //然后把这个字符串送到后台解密
//移除添加的元素
$('.super').remove();
var url=""//自己的地址
$.post(url, { file: base64 }, function (returndata) {
try {
var ss = JSON.parse(returndata);
//如果想要关闭当前页,网上有很多,这里就说一下谷歌浏览器,
//谷歌浏览器比较特殊,只能把window.location.href = 'about:blank '才可以关闭
//window.open("about:blank", "_self").close();//关闭当前页
window.open(JSON.parse(ss[0]).data.url);
$('#GZSP_XS_Sure_Mask').hide();
} catch (e) {
$.messager.alert('提示', returndata, 'info');
}
});
}
});
}2.后台这里使用的.net;不过大体思路都是一样的,用其他语言也是可以的。方法对就行
//根据前台传递过来的文件流,生成文件,这里我写的是绝对地址,文件名fileNanme自己起
FileStream writeStream = new FileStream(@"E:\bmcp\bmcpWeb\BaseJSD\JSD_PDF\" + fileName, FileMode.Create);// 文件不保存创建一个文件
string BASEFile = Request["file"];//这里获得传递过来的文件流,这个是我本地得到前台传递过来的参数方法,自己要根据实际情况进行判断
byte[] b = Convert.FromBase64String(BASEFile);//BASEFile为前台页面传递过来的数据
// Base64解码
for (int i = 0; i < b.Length; ++i)
{
// 调整异常数据
if (b[i] < 0)
{
b[i] += 32;
}
writeStream.WriteByte(b[i]);// 写入本地文件
}
//关闭流
writeStream.Close();
边栏推荐
- 【线程知识点】-- 自旋锁
- Full solution of JDBC API
- How to use pixi.js to make simple Parkour games
- 保姆级Scanner类使用详解
- 2022-7-14 JMeter simulates the login of different users for pressure test
- [stl]stack & queue simulation implementation
- ActiveMQ -- kahadb of persistent mechanism
- [SCADA case] myscada helps VIB company realize the modernization and upgrading of production line
- The development of art NFT
- 将list集合的某一字段拼接单个String
猜你喜欢

This ten-year content industry infrastructure company is actually an invisible Web3 pioneer

OpenCV实现简单的人脸追踪

Uniapp intercepts route jumps through addinterceptor to control whether the page needs to log in

整理 华为AP-3010DN_V2配置创建wifi

2022-7-14 JMeter pressure test

How to write the code of wechat applet implementation tab

Query efficiency increased by 10 times! Three optimization schemes to help you solve the deep paging problem of MySQL

nacos2.1.0集群搭建

Sticky.js page scrolling div fixed position plug-in

A picture to quickly understand envoyfilter in istio
随机推荐
API parsing of JDBC
CentOS changes MySQL database directory
ActiveMQ -- message retry mechanism
Disable module (attribute node) in LabVIEW
分享一个避免递归的部门设计方法
[STL]stack&queue模拟实现
Wechat applet obtains the data of ---- onenet and controls the on-board LED of STM32
Algorithm --- flip digit (kotlin)
『怎么用』代理模式
[SCADA case] myscada helps VIB company realize the modernization and upgrading of production line
Arrange the array into the smallest number
[buuctf-n1book][Chapter 2 advanced web]ssrf training
黑马程序员JDBC
Redis的十大常见应用场景
Bi business interview with data center and business intelligence (I): preparation for Industry and business research
【线程知识点】-- 自旋锁
Ctfhub skill tree Web
activemq--可持久化机制之AMQ
activemq--可持久化机制之KahaDB
Canvas text JS special effect composed of many circles