介绍

前端 PDF 打印插件，基于 jspdf 和 html2canvas 开发

• jspdf
• html2canvas

使用

安装依赖 jspdf、html2canvas

yarn add jspdf html2canvas

示例

• 基础用法

<template>
	<div class="pdf-demo">
		<div class="pdf-print-wrapper">
			<user-info />
		</div>

		<el-button type="success" :loading="loading" @click="toPDF">打印</el-button>
	</div>
</template>

<script setup lang="ts">
	import { usePDF } from "../hooks";
	import UserInfo from "./components/user-info.vue";

	const { loading, toPrint } = usePDF();

	function toPDF() {
		toPrint({
			target: document.querySelector(".pdf-print-wrapper")
		});
	}
</script>

<style lang="scss">
	.pdf-print-wrapper {
		border: 1px solid red;
		border-radius: 5px;
		padding: 20px;
		margin-bottom: 10px;
	}
</style>

• 表单插件中使用

<template>
	<div class="pdf-demo">
		<el-button @click="open">打开表单</el-button>

		<cl-form ref="Form">
			<template #slot-content>
				<user-info />
			</template>
		</cl-form>
	</div>
</template>

<script setup lang="ts">
	import { useForm } from "@cool-vue/crud";
	import { setPDF } from "../plugins";
	import UserInfo from "./components/user-info.vue";

	const Form = useForm();

	function open() {
		Form.value?.open(
			{
				title: "用户信息",

				items: [
					{
						component: {
							name: "slot-content"
						}
					}
				]
			},
			[
				setPDF({
					label: "打印",
					type: "warning",
					text: false
				})
			]
		);
	}
</script>

更新日志

• v1.0.0 (2024-02-02)
  • 初始版本