jsPDF生成pdf文件

vue.js+jspdf.js+html2pdf.js 实现页面导出PDF vue.js+jspdf.js+html2pdf.js 实现页面导出PDF 原本是导出word但客户考虑到问到的安全性要求改成了PDF,由于之前的word导出也是有前端生成的,所以为了不增加工作量导出依旧有前端完成。起初在网上找了很多方法都无法实现,都想放弃了让后端写,后来看到了关于jspdf.js+html2canvas.js的文章,想着试试看吧。对于前端导出PDF我就是个小白,啥也不会。按着文章一步步写吧。 安装插件html2canvas和jspdf npm install html2canvas--s 阅读详情

需求:前端从服务器获取图片信息,然后将图片插入到pdf中并下载

使用的是jsPDF.js  官方文档地址:https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html#~addImage

需要解释的是myloadImageFile 这个方法,这个是jsPDF提供的一个方法,但是他的if判断如果有跨域请求就不去获取文件了

因为我是本地调试协议是file:// 所以把这个方法拉出来重写了下。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>

<script type="text/javascript" src="../disk/jspdf.debug.js"></script>
<button id="export-pdf">export pdf</button>
	<form class="form">
      <label>Page size </label>
      <select id="format">
        <option value="a0">A0 (slow)</option>
        <option value="a1">A1</option>
        <option value="a2">A2</option>
        <option value="a3">A3</option>
        <option value="a4" selected>A4</option>
        <option value="a5">A5 (fast)</option>
      </select>
    </form>
<script type="text/javascript">
	  	myloadImageFile = function (path, sync, callback) {
  		sync = sync || true;
  		callback = callback || function () {};
  		var isNode = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';

  		var xhrMethod = function xhrMethod(url, sync, callback) {
  			var req = new XMLHttpRequest();
  			var byteArray = [];
  			var i = 0;

  			var sanitizeUnicode = function sanitizeUnicode(data) {
  				var dataLength = data.length;
  				var StringFromCharCode = String.fromCharCode;

  				//Transform Unicode to ASCII
  				for (i = 0; i < dataLength; i += 1) {
  					byteArray.push(StringFromCharCode(data.charCodeAt(i) & 0xff));
  				}
  				return byteArray.join("");
  			};

  			req.open('GET', url, !sync);
  			// XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  			req.overrideMimeType('text\/plain; charset=x-user-defined');

  			if (sync === false) {
  				req.onload = function () {
  					return sanitizeUnicode(this.responseText);
  				};
  			}
  			req.send(null);

  			if (req.status !== 200) {
  				console.warn('Unable to load file "' + url + '"');
  				return;
  			}

  			if (sync) {
  				return sanitizeUnicode(req.responseText);
  			}
  		};

  		//we have a browser and probably no CORS-Problem
//if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== undefined && (typeof location === 'undefined' ? 'undefined' : _typeof(location)) === "object" && location.protocol.substr(0, 4) === "http") {
  			return xhrMethod(path, sync, callback);
  	//	}
		};
 var dims = {
        a0: [1189, 841],
        a1: [841, 594],
        a2: [594, 420],
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
      };
 var exportButton = document.getElementById('export-pdf');

      exportButton.addEventListener('click', function() {

        exportButton.disabled = true;
        document.body.style.cursor = 'progress';
       
        var dim = dims[format];

	  	var pdf = new jsPDF('p', 'mm', format); // p是竖向;l横向打印
		var imgData = myloadImageFile('http://image/a.png', 'true');
		console.info("super:" + imgData);
		pdf.setProperties({
			title: '制图',
			subject: 'http://www.eqxiu.com/h2/visit',
			author: 'eqxiu',
			keywords: 'eqxiu',
			creator: 'eqxiu'
		});
        pdf.addImage(imgData, 'JPEG', 0, 0);
        pdf.save('map.pdf');
	  exportButton.disabled = false;
	  });
	
</script>
</body>
</html>

 

jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例) 整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问 阅读详情

相关推荐

基于 jspdf.js 库生成 PDF 文件时中文乱码问题的解决

因此,要解决这种方式中文乱码的问题,其实就是解决 html2canvas 库对中文的不支持问题,其解决方式是通过设置 html2canvas 的字体。中的字体转换器,可以将字体的ttf文件转换为base64编码字符串的形式。使用 jspdf.js 生成 PDF 文件有两种方式:一种是创建 jsPDF 实例后,手动使用 addPage、text 等 api 把获取到的数据排版生成 PDF 文件;jsPDF支持 .ttf 文件,因此,如果你想在 PDF 中使用中文文本,则字体必须具有包含必要的中文字形的功能。

仰望星空的代码 4886

Uncaught ReferenceError: jsPDF is not defined

new jsPDF()换成new window.jspdf.jsPDF();

wxwxwxww的博客 1057

Keil MDK v6迁移指南:从AC5到AC6的编译器升级与工程适配

编译器是嵌入式开发的底层基石,决定了代码的执行效率与工程的可维护性。随着ARM工具链向LLVM/Clang架构演进,Arm Compiler 6(AC6)正逐步取代经典的AC5,成为Keil MDK的核心编译引擎。AC6在C11标准支持、代码优化、诊断信息及LTO链接优化上全面超越AC5,但迁移过程中往往伴随内联汇编重写、类型检查严格化、库兼容性等问题。理解编译器差异、掌握CMSIS-Toolbox的工程描述机制,能帮助嵌入式工程师在Cortex-M系列项目中平滑过渡。本文结合Cortex-M4量产工程实战

weixin_29189363的博客 237

jspdf 生成pdf文件_使用jsPDF快速从网页生成PDF

jspdf 生成pdf文件The Portable Document Format has been one the major innovations in the fields of desktop publishing and office automations. 可移植文档格式已成为桌面出版和办公室自动化领域的主要创新之一。 It’s widely used in web publi...

culi3182的博客 3481

Zabbix-获取客户端的SNMP数据

网口状态(ifOperStatus)的 OID 是1.3.6.1.2.1.2.2.1.8,查询时需要用1.3.6.1.2.1.2.2.1.8.1(第 1 个网口)、1.3.6.1.2.1.2.2.1.8.2(第 2 个网口)等。表格对象是指 “包含多个同类实例的对象”(如设备的多个网口、多个进程等,每个实例需要单独标识)。在 SNMP 规范中,标量对象的完整 OID 必须以.0结尾,.0是标量对象的唯一实例编号。标量对象是指 “单一值的对象”(如设备的名称、温度、状态等,整个设备只需要一个值来表示)。

徐子元 1728

在x86机器上运行jailhouse

jailhouse jaihouse提供了一个demo ,https://github.com/siemens/jailhouse-images可以用于编译一整套可用的demo。 适用于多个平台。编译过程主要参考https://blog.youkuaiyun.com/weixin_39541632/article/details/110422345 此demo可以生成多个平台所用的操作系统image。 ...

闲人的专栏 3005

使用jsPDF生成PDF文件

使用两个开源项目,这是他们的地址 jsPDF:https://github.com/MrRio/jsPDF jsPDF-AutoTable:https://github.com/simonbengtsson/jsPDF-AutoTable 项目引入,我使用的版本是jsPDF(1.5.3)、jsPDF-AutoTable(3.2.4) <script src="libs/jspdf.deb...

WeiLanShun_CSND的博客 4821

基于线性光耦HCNR200的高压直流采样电路设计与精度优化

本文详细介绍了基于线性光耦HCNR200的高压直流采样电路设计与精度优化方法。针对直流高电压测量中的安全与干扰问题,提出采用HCNR200光耦隔离方案,实现高精度线性传输。文章深入解析电路设计关键细节,包括电阻网络、运放选型、滤波电容配置等,并提供精度优化实战技巧与常见问题排查指南,助力新能源电动汽车和高压储能系统的高压直流采样应用。

weixin_42713608的博客 580

前端vue的JsPDF html2canvas 生成pdf并以文件流形式上传到后端

1.首先在文件内引入htmlToPdf.js 这里代码引入了html2canvas和jspdf //需要 npm i html2Canvas 和 npm i jspdf 在这里将getPdf 这个函数挂载到Vue的原型上,最后return一个promise对象(包含了resolve的base64Pdf,以便于处理),在局部组件内可进行.then以进行上传后端等操作。 插件代码如下 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf'

几百块的博客 1万+

【WRF-Urban】使用 LCZ 替换 WRF 运行中的 LUCC 数据

使用 LCZ 替换 WRF 运行中的 LUCC 数据

WW、forever的博客 991

17 指挥AI写Mamba相关模型代码,快速适配大模型场景

本文为《30天掌控AI编程:从指令到落地,手把手教你指挥AI写代码》系列第十七篇,属于第三阶段多场景实战核心内容。本篇聚焦当下大模型领域热门的**Mamba架构**,针对零基础大模型开发、无深度学习基础的使用者,拆解指挥AI生成Mamba基础模型、微调适配、推理部署代码的核心方法,覆盖Mamba基础模块搭建、简易序列建模、小样本微调、本地推理等高频场景,提供可直接复用的高质量指令模板、完整可运行代码、环境配置与避坑指南,无需精通Transformer、状态空间模型等底层原理,轻松上手Mamba大模型开发。

coreopt的博客 61

jsPDF,生成pdf文件的助手

jsPDF是一个强大的基于HTML5的PDF生成工具,许多公司需要用它来生成pdf报表。 我也是昨天才了解到它,所以我对于jspdf也是一知半解,在这里我归纳两种我觉得比较实用的生成方法。 链接地址http://mrrio.github.io/ 首先,你必须得拥有这个插件 这是练习这个功能所需要的js文件,但是我所归纳的两种只需要以下三种 如果有找不到下载地址的,可以加我百度云我

BestFIzz 4541

【AI大模型应用开发】【RAG评估】0. 综述:一文了解RAG评估方法、工具与指标

本文主要总结了当前比较流行的RAG评估方法和指标。当前AI技术的快速发展,RAG和RAG评估是当前比较有前景的发展方向,不断有新的评估工具和理论被提出,让我们持续跟进,了解这些工具和理论,从而在使用时知道如何选择。

同学小张的博客 6829

vue中使用html2canvas和jspdf将html页面生成pdf文件并下载

将html页面生成pdf文件,需首先将页面转换为图片,然后再输出成pdf。 因此,需要用到 html2canvas 插件和 jspdf 这两个插件。 1、引入 html2canvas 和 jspdf npm install html2canvas npm install jspdf --save 2、项目内引入 import html2canvas from 'html2canvas' imp...

weixin_42864357的博客 2135

APP爬虫:Airtest的使用和爬取实战详解

Airtest是一个跨平台的自动化测试工具,主要用于移动应用和游戏的UI自动化测试。它支持图像识别、触摸操作、文本输入等功能,能够模拟真实用户的操作行为。此外,Airtest还具备强大的日志记录和报告生成功能,方便开发者进行调试和分析。图像识别:通过截图匹配元素,无需依赖 UI 层次结构。跨平台支持:支持 Android、iOS 和 Windows 应用。简单易用:提供 IDE 和脚本录制功能,降低使用门槛。

数据知道的博客 9620

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

使用react+html2canvas+jspdf实现生成pdf文件

导入html2canvas和jspdf插件到项目中 npm install html2canvas npm install jspdf 引入html2canvas和jspdf到jsx中 import jsPDF from 'jspdf'; import html2canvas from 'html2canvas' 定义一个div和需要生成pdf的页面 <div id="demo">...

weixin_43672560的博客 3606

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

前端使用jspdf生成PDF通过ajax传输后台生成PDF文件

html需要引入 html2canvas.js 和jspdf.debug.js  &lt;script src="static/libs/jsPDF-master/dist/jspdf.min.js"&gt;&lt;/script&gt; &lt;script src="static/libs/jsPDF-master/dist/html2canvas.js"&gt;&lt;/script&g...

csl125的博客 2万+

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

生成pdf文件并打成压缩包下载 jsPDF JSZip

生成pdf文件并打成压缩包下载 jsPDF JSZip

byzzzzz的博客 1822

使用html2canvas和jsPDF生成pdf文件

做了图片加载成功后再生成图片的处理。用jspdf做了90度旋转。

m0_62317272的博客 179

前端通过html2canvas+jspdf 生成PDF文件

JS通过html2canvas+jspdf 生成PDF文件 下载必要的JS文件 jspdf.debug.js: https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.jshttps://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js html2ca...

yangwenxin_1的博客 5568

vue2使用pdfjs-dist和jsPDF生成pdf文件

1)pdfjs-dist安装低版本,高版本报错。3)如果将多个图像添加到一个文档中,请使用。否则第一张图片将替换所有其他图片。

weixin_44239362的博客 2187

前端jspdf生成PDFbase64格式的字符串通过ajax传输后台生成PDF文件

前端JS框架:AngularsJS前后端交互:Ajax后端技术:Java相关代码:HTML代码片段:&lt;button ng-click="generatePdf()"&gt;生成账单&lt;/button&gt; &lt;div id="zero"&gt;HelloWorld&lt;/div&gt; &lt;script src="static/libs/jsPDF-master/d

ayumu5566的博客 1万+

将jsPDF生成的PDF文件上传至服务器

需求:将jsPDF生成的文件,转成file文件,再上传至服务器 putFile(PDF, fileName) { // 用于测试 PDF.save(`${fileName}.pdf`) let file = this.convertBase64ToFile(PDF.output("dataurlstring"), fileName); putFileAttach({ file, attachType: 'report_uploa

weixin_43993121的博客 2290

记录vue中使用html2canvas+jspdf实现页面生成pdf文件功能

文章目录一、前言二、使用步骤1.安装2.引入插件3.根据自身业务编写所需代码4.页面使用 一、前言 jspdf是一款开源插件,主要用于集成pdf文件;html2canvas是一个借助canvas将元素生成图片的一款插件。二者搭配使用可前端实现pdf文件的生成。 二、使用步骤 1.安装 代码如下: npm install html2canvas npm install jspdf 2.引入插件 代码如下: // 新建pdf.js文件,导入插件 import html2canvas from "html2c

to_the_Future的博客 1997
上一篇: 挖矿程序入侵解决方案
下一篇: svg text文字
1990_super
博客等级 码龄15年 83粉丝 45原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值