uni-app vue 在手机APP中将页面转为图片、保存为PDF文件、打开文件

晓_枫

已于 2024-03-30 16:47:48 修改

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue uni-app 文章标签： uni-app pdf vue.js

于 2023-05-05 15:54:52 首次发布

本文链接：https://blog.csdn.net/qq_18676843/article/details/130507873

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

uni-app

6 篇文章

订阅专栏

该博客主要介绍了在uni-app中生成图片并将其转换为base64格式文件，以及在安卓系统下将base64转换为文件的方法。内容包含安装插件、设置script节点、引入插件、编写HTML内容等步骤，并给出了完整演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装插件

npm i html2canvas

npm i jspdf

二、将第一个script 节点的 lang 为 renderjs

<script module="test" lang="renderjs"></script>

三、引入插件

	import html2canvas from 'html2canvas'
	import { jsPDF } from 'jspdf';

四、HTML内容

		<uni-table stripe emptyText="暂无更多数据" id="detail">
			<uni-tr>
				<uni-td>样品名称</uni-td>
				<uni-td>456</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td>日期</uni-td>
				<uni-td>2023-04-24</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td>单位</uni-td>
				<uni-td>单位</uni-td>
			</uni-tr>
		</uni-table>

五、生成图片并获取base64格式文件

const detail = document.getElementById(
	'detail') //获取到html包含此页面的外层标签，detail为页面中需要导出为pdf的最外层标签的id名
const imgHeight = detail.clientHeight;
const imgWidth = detail.clientWidth;

html2canvas(detail,{//对应的dom元素id(class也可以)
	allowTaint: true,//是否允许跨域图像渲染画布
	useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
}).then((canvas) => {
	// console.log(canvas);
	return new Promise((resolve, reject) => {
		console.log(4);
		setTimeout(() => {
			console.log(5);
			resolve(canvas)
		}, 500) 
	}).then((canvas) => {
		console.log(6);
		
		//生成的canvas实例
		var contentWidth = canvas.width;//所选元素宽度
		var contentHeight = canvas.height;//所选元素高度
		//一页pdf显示html页面生成的canvas高度;
		var pageHeight = contentWidth / 595.28 * 841.89;
		//未生成pdf的html页面高度
		var leftHeight = contentHeight;
		//pdf页面偏移
		var position = 0;
		//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 555.28;
		var imgHeight = 555.28 / contentWidth * contentHeight;
		var pageData = canvas.toDataURL('image/jpeg', 1.0);//转成jpg格式
		var pdf = new jsPDF('', 'pt', 'a4');//生成pdf实例
		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
		//当内容未超过pdf一页显示的范围，无需分页
		if (leftHeight < pageHeight) {
			pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
		} else {
			while (leftHeight > 0) {
				pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
				leftHeight -= pageHeight;
				position -= 841.89;
				//避免添加空白页
				if (leftHeight > 0) {
					pdf.addPage();
				}
			}
		}

		var blob = pdf.output("datauristring");
        
        // 在renderjs中无法使用uni和plus对象，这里调用另一个script中的方法
		this.$ownerInstance.callMethod('downPdf', blob);
		
	}).catch((r) => {
		console.log(r);
	})
});

六、再写一个普通的script

<script></script>

七、定义base64转文件方法（仅支持安卓）

/**
 * base64字符串转成文件
 * @param {String} base64Str // 允许包含前缀
 * @param {String} fileName // 文件名称：1663061363470.xlsx
 * @param {Object} callback  // 返回本地路径径URL，file:///xxx/doc/1663062980631.xlsx
 */
function base64ToFile(base64Str, fileName, callback) {

	// 去除base64前缀
	var index = base64Str.indexOf(',')
	var base64Str = base64Str.slice(index + 1, base64Str.length)

	plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
		fs.root.getFile(fileName, {
			create: true
		}, function(entry) {

			// 获得本地路径URL，file:///xxx/doc/1663062980631.xlsx
			var fullPath = entry.fullPath;

			var Base64 = plus.android.importClass("android.util.Base64");
			var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
			var out = new FileOutputStream(fullPath);
			// 此处Base64.decode有长度限制，如果不能满足需求，可以考虑换成官方原生插件市场的【Base64转文件】
			var bytes = Base64.decode(base64Str, Base64.DEFAULT);
			out.write(bytes);
			out.close();
			// 回调  
			callback && callback(entry.toLocalURL());
		})
	})
}

八、在export default中定义要被调用的方法

export default {
	methods: {
		downPdf(path) {
			var fileName = (new Date()).valueOf() + '.pdf';
			base64ToFile(path, fileName, function(path) {
				console.log('result', path);
				plus.runtime.openFile(path); //用第三方程序打开文件
			})
		}
	}
}

九、完整演示

<template>
	<view class="content">
		<view @click="test.myprint()">
			打印
		</view>
		<uni-table stripe emptyText="暂无更多数据" id="detail">
			<uni-tr>
				<uni-td>样品名称</uni-td>
				<uni-td>456</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td>日期</uni-td>
				<uni-td>2023-04-24</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td>单位</uni-td>
				<uni-td>单位</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>
<script module="test" lang="renderjs">
	import html2canvas from 'html2canvas'
	import {
		jsPDF
	} from 'jspdf';
	export default {
		methods: {
			myprint() {
				const detail = document.getElementById(
					'detail') //获取到html包含此页面的外层标签，detail为页面中需要导出为pdf的最外层标签的id名
				const imgHeight = detail.clientHeight;
				const imgWidth = detail.clientWidth;

				html2canvas(detail, { //对应的dom元素id(class也可以)
					allowTaint: true, //是否允许跨域图像渲染画布
					useCORS: true, //是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
				}).then((canvas) => {
					// console.log(canvas);
					return new Promise((resolve, reject) => {
						console.log(4);
						setTimeout(() => {
							console.log(5);
							resolve(canvas)
						}, 500)
					}).then((canvas) => {
						console.log(6);

						//生成的canvas实例
						var contentWidth = canvas.width; //所选元素宽度
						var contentHeight = canvas.height; //所选元素高度
						//一页pdf显示html页面生成的canvas高度;
						var pageHeight = contentWidth / 595.28 * 841.89;
						//未生成pdf的html页面高度
						var leftHeight = contentHeight;
						//pdf页面偏移
						var position = 0;
						//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
						var imgWidth = 555.28;
						var imgHeight = 555.28 / contentWidth * contentHeight;
						var pageData = canvas.toDataURL('image/jpeg', 1.0); //转成jpg格式
						var pdf = new jsPDF('', 'pt', 'a4'); //生成pdf实例
						//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
						//当内容未超过pdf一页显示的范围，无需分页
						if (leftHeight < pageHeight) {
							pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
						} else {
							while (leftHeight > 0) {
								pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
								leftHeight -= pageHeight;
								position -= 841.89;
								//避免添加空白页
								if (leftHeight > 0) {
									pdf.addPage();
								}
							}
						}

						var blob = pdf.output("datauristring");
						console.log(7);
						// 在renderjs中无法使用uni和plus对象，这里调用另一个script中的方法
						this.$ownerInstance.callMethod('downPdf', blob);

					}).catch((r) => {
						console.log(r);
					})
				});
			}
		}
	}
</script>
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * base64字符串转成文件
			 * @param {String} base64Str // 允许包含前缀
			 * @param {String} fileName // 文件名称：1663061363470.xlsx
			 * @param {Object} callback  // 返回本地路径径URL，file:///xxx/doc/1663062980631.xlsx
			 */
			base64ToFile(base64Str, fileName, callback) {

				// 去除base64前缀
				var index = base64Str.indexOf(',')
				var base64Str = base64Str.slice(index + 1, base64Str.length)

				plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
					fs.root.getFile(fileName, {
						create: true
					}, function(entry) {

						// 获得本地路径URL，file:///xxx/doc/1663062980631.xlsx
						var fullPath = entry.fullPath;

						var Base64 = plus.android.importClass("android.util.Base64");
						var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
						var out = new FileOutputStream(fullPath);
						// 此处Base64.decode有长度限制，如果不能满足需求，可以考虑换成官方原生插件市场的【Base64转文件】
						var bytes = Base64.decode(base64Str, Base64.DEFAULT);
						out.write(bytes);
						out.close();
						// 回调  
						callback && callback(entry.toLocalURL());
					})
				})
			},
			downPdf(path) {
				var fileName = (new Date()).valueOf() + '.pdf';
				this.base64ToFile(path, fileName, function(path) {
					console.log('result', path);
					plus.runtime.openFile(path); //用第三方程序打开文件
				})
			}
		}
	}
</script>