【Vue】使用print.js插件实现打印预览功能，超简单
<template>
<div>
<!-- 按钮用于触发打印 -->
<button @click="print">打印</button>
<!-- 需要打印的内容 -->
<div id="printable">
<h1>这是一个打印预览示例</h1>
<p>这段文字将会在打印预览中显示。</p>
<!-- 更多内容 -->
</div>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
print() {
printJS({
printable: 'printable',
type: 'html',
targetStyles: ['*']
});
}
}
};
</script>这段代码提供了一个简单的Vue组件，其中包含了一个按钮和一个需要打印的内容区域。点击按钮时，会触发print方法，该方法使用print-js插件来打开打印预览界面。printable属性设置为DOM元素的ID，指定了需要打印的内容。targetStyles属性确保了所有的样式都将被应用到打印的内容上。
评论已关闭