vue使用 html2canvas 导出页面，及将图片转成 pdf 格式

1. 下载 html2canvas，下载 jsPDF

npm install --save html2canvas

npm i jspdf --save

在vue文件中使用，这样前期的准备工作就完成了

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

2. 将DOM元素渲染成canvas，并下载，html2canvas最基本的用法

// elementId，是你要渲染的DOM的ID值，这个ID以下的所有内容都会被渲染出来
html2canvas(elementId).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// 创建一个a标签，用来下载图片var eleLink = document.createElement('a');// 转换后的图片地址eleLink.href = imgUrl;// 文件名设置eleLink.download = '默认文件名';// 下载eleLink.click();});
});

3. 将 png 转化成 pdf

html2canvas(elementId).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// 实例化一个PDF对象，三个参数分别是// 1.排列方式  2.像素单位  3.[宽,高]var pdf = new JsPDF('landscape', 'pt', [200, 200]);// 将图片转化为dataUrlpdf.addImage(imgUrl, 'PNG', 0, 0, 200, 200);// 下载保存PDF，参数是下载下来的文件名pdf.save(`默认文件名.pdf`);
});

4. 封装成函数

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/*** 参数* elementId : 所要截图元素的id，id值在这个单页面中应该是唯一值* printName : 导出图片的名字* img2Pdf   : 是否转化为PDF格式，默认false，不导出pdf*/
export function print(elementId, printName = '导出图', img2Pdf = false) {// dpi : 表示导出图片的清晰度，数值越高清晰度越高// 这里说的其实不是很详细，详细可以去这个博客看看【https://blog.csdn.net/weixin_41863239/article/details/85248545】return new Promise((resolve) => {html2canvas(elementId, { dpi: 300 }).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// img2Pdf为true，转化成PDFif (img2Pdf) {getImgSize(imgUrl).then((res) => {// 实例化一个PDF对象，三个参数分别是// 1.排列方式  2.像素单位  3.[宽,高]var pdf = new JsPDF('landscape', 'pt', [res.width, res.height]);// 将图片转化为dataUrlpdf.addImage(imgUrl, 'PNG', 0, 0, res.width, res.height);// 下载保存PDF，参数是下载下来的文件名pdf.save(`${printName}.pdf`);resolve();});return;}if (!img2Pdf) {// 创建一个a标签，用来下载图片var eleLink = document.createElement('a');// 转换后的图片地址eleLink.href = imgUrl;// 文件名设置eleLink.download = printName;// 下载eleLink.click();resolve();return;}});});
}
// TODO: img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能执行其他函数
function getImgSize(imgUrl) {// img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能获取他的宽高// 否则极有可能获取undefined，这里非常坑return new Promise((resolve) => {// 创建一个img元素var imgTemp = document.createElement('img');// 赋值imgTemp.src = imgUrl;// img.onload函数，定义图片加载完成后的函数，只有图片加载完成后才能拿到他的宽高，要不然也都是undefinedimgTemp.onload = () => {// 定义图片对象，保存宽高let imgObj = {width: imgTemp.width,height: imgTemp.height,};// 返回宽高resolve(imgObj);};});
}

vue使用 html2canvas 导出页面，及将图片转成 pdf 格式相关推荐

xsd文件转图片_图片转换成PDF格式怎么转？图片转换成PDF的软件哪个好？
图片转换成PDF格式怎么转?经验丰富的设计师在完成图片格式的设计作品后都会将图片转成PDF格式文件,这样方便保存以及参加一些设计比赛.同时我们在保存大量图片的时候也可以将图片转换成PDF文件.但是还有 ...
为什么复制粘贴格式总是出错_想把图片转换成pdf格式怎么做？你找对方法了吗...
在工作中,总是会遇到各式各样的文件格式问题,例如昨天客户要的是PDF版本,我却做成了图片格式,现在只有把图片转换成PDF格式了,关键是几十张的长图,转换起来会不会很麻烦?其实只要找对了方法,就能很轻松 ...
图片转成pdf格式怎么转？三个好用的方法教给你
图片转成pdf格式怎么转?图片作为我们日常工作和生活中最常接触到的一些内容,我们经常需要发送一些图片.图片较少还好,一旦图片较多,我们发送的时候会比较麻烦.其实我们完全可以将图片合并起来发送,这样不仅 ...
如何把图片转换成PDF格式？这两种方法不要错过
怎么把图片转换成PDF文件格式呢?PDF文件一直以来都是我们传输文件的好帮手,它的显著效果不仅可以体现在文件上,也可以在图片中拥有良好的体验感.我们将图片转换成PDF格式来发送或者是打印,就不会出现排 ...
如何免费将多张JPG图片转成PDF格式操作方法分享
PDF文件是我们工作中经常接触的一种文件格式,在日常的工作以及生活当中,我们经常需要将JPG图片转换成PDF,那么如何免费将多张JPG图片转成PDF格式呢?今天小编就给大家分享具体的操作方法. 首先, ...
python 怎么将数组转为列表_图片转换成pdf格式怎么操作？什么软件能将图片转为pdf？...
伙伴们好,你们知道如何把图片转为pdf格式吗?前一阵子我参加了一个家居行业大会,在会议上拍摄了不少会议照片,包括主持人讲话.嘉宾出席.观众提问.产品推广等环节都拍摄了不同的角度.拍摄好后,需要传送给写 ...
jpg格式图片怎么转换成pdf格式？如何把jpg图片转换成pdf格式文档？
把图片转换为pdf的软件?什么软件可以把图片转换成pdf格式?有时候我们需要把图片转成pdf.可能还有些小伙伴不知道怎么去完成这项转换的,图片转pdf其实很简单,下面给大家分享一把图片转成pdf的简单 ...
图片转成pdf格式怎么转？
图片转成pdf格式怎么转?pdf格式是日常办公或者学习中常用的格式之一. 当我们编写完office文件(word或ppt)时,我们会选择将其转换为PDF.可能有些小伙伴还不明白为什么要把图片转换成PD ...
图片转换成pdf格式如何转换？
图片转换成pdf格式如何转换?大家对图片格式应该不会陌生,比如JPG,JPEG,PNG,BMP,GIF,TIF等,但是大家对于PDF格式可能有人还不太了解,其实PDF是一种便携式文档文件格式,这种格式 ...
怎样将PNG格式的图片转成PDF格式
都知道我们经常在网上看到的图片虽然有的看起来是一样,但是右击查看图片的属性都是不一样的.在这里小编问大家一个问题,你们知道如何将一般图片的格式转换=成PDF格式吗?就拿PNG转PDF格式来说,可能大部 ...

vue使用 html2canvas 导出页面，及将图片转成 pdf 格式

1. 下载 html2canvas，下载 jsPDF

2. 将DOM元素渲染成canvas，并下载，html2canvas最基本的用法

3. 将 png 转化成 pdf

4. 封装成函数

vue使用 html2canvas 导出页面，及将图片转成 pdf 格式相关推荐

最新文章

热门文章