快捷導(dǎo)航

vue3中使用print-js組件實(shí)現(xiàn)打印操作步驟

更新時間：2025年02月10日 12:02:02 作者：滕米

文章介紹了在Vue?3中使用print-js組件實(shí)現(xiàn)打印操作的步驟,包括安裝依賴、創(chuàng)建打印組件和處理打印預(yù)覽界面,文章還提到打印預(yù)覽界面的樣式調(diào)整對打印效果的影響,并展示了HTML展示和打印預(yù)覽效果,最后,文章鼓勵讀者繼續(xù)瀏覽相關(guān)文章并支持腳本之家

第一步：安裝依賴

yarn add print-js

第二步：創(chuàng)建打印組件：PrintHtmlComp.vue

<template>
	<div id="printArea_123456789">
		<!--  默認(rèn)插槽，傳入打印內(nèi)容    -->
		<slot></slot>
	</div>
</template>
<script setup lang="ts">
import printJs from 'print-js';
defineOptions({ name: 'PrintHtmlComp' });
const props = defineProps({
	fontSize: {
		type: Number,
		default: 14,
		required: false,
	},
});
const handlePrint = () => {
	printJs({
		printable: 'printArea_123456789', // 打印區(qū)域的id
		type: 'html',
		scanStyles: true,
		targetStyles: ['*'], // 使用dom的所有樣式，很重要
		font_size: props.fontSize + 'px', // 字體大小 --很重要，這里字體要和css中字體大小保持一致，默認(rèn)是16px
	});
};
defineExpose({ handlePrint });
</script>

第三步：處理打印預(yù)覽的界面 PrintPop.vue

這個界面的的樣式調(diào)整直接關(guān)系到打印的樣式的，即想要打印什么樣的效果就在這個界面怎么調(diào)試。

 
	<el-dialog v-model="state.dialogVisible" :destroy-on-close="true" :title="state.title" width="780px" @close="close">
		<PrintHtmlComp ref="printRef">
            <!---這里是想要打印的-->
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
			<div style="font-size: 20px">HELLO WORLD</div>
		</PrintHtmlComp>
		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="state.saveLoading" type="primary" @click="handlePrint">打 印</el-button>
		</template>
	</el-dialog>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
defineOptions({ name: 'WorkApplyPlanPrint' });
const state = reactive({
	dialogVisible: false,
});
const showEdit = async () => {
	state.dialogVisible = true;
};
const close = () => {
	state.dialogVisible = false;
};
// 打印功能的函數(shù)
const handlePrint = async () => {
	printRef.value?.handlePrint();
};
defineExpose({ showEdit });
</script>

HTML展示效果