jsPDF生成pdf文件

最新推荐文章于 2024-06-15 14:24:37 发布

1990_super

最新推荐文章于 2024-06-15 14:24:37 发布

阅读量8.9k

点赞数 1

分类专栏： js 文章标签： jsPDF js下载远程图片 js生成pdf文件

本文链接：https://blog.csdn.net/runbat/article/details/84789946

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：前端从服务器获取图片信息，然后将图片插入到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>

1990_super

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
jsPDF生成pdf文件

需求：前端从服务器获取图片信息，然后将图片插入到pdf中并下载使用的是jsPDF.js 官方文档地址：https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html#~addImage需要解释的是myloadImageFile 这个方法，这个是jsPDF提供的一个方法，但是他的if判断如果有跨域请求就不去获取文件了因为我...
复制链接

扫一扫

专栏目录