<template><el-buttontype="primary"@click="printHTML">打印HTML</el-button>姓名年龄职业张三25工程师李四30设计师</template>importprintJSfrom'print-js'exportdefault{methods: {printHTML() {printJS({printable:'printable-content',type:'html', }) } } } AI代码助手复制代码 在这个示例中,我们创建了...
官方地址:Print.js - Javascript library for HTML elements, PDF and image files printing. GitHub地址:GitHub - crabbly/Printjs: A tiny javascript library to help printing from the web. 如何认识和快速上手 Print.js,我们可以从官网的内容开始阅读,在官网中有很详细的介绍和使用例子,虽然是英文版的。Prin...
其实之所以会有下篇的内容,是因为这个 Vue3 实战项目的前端用了 Element-Plus 这个 UI 框架,其中包括有表格、分页,在博主的文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台)中就已经开始用这套模板了,今天在此基础上和 Vue3 实战项目的延申上,我们来讲一下关于 el-...
1. 使用 CSS 样式：在打印样式表中，为表格元素添加合适的边框样式，例如：```css @media print { ...
print.js源码: /** * 打印类 * @param {*} dom 打印节点(可以是对象也可以是字符串,会自动识别处理) * @param {*} options 打印参数,例如指定某些地方不打印 * @param {*} debug 打印调试。 * 说明: * debug参数的详细说明 * 因为很多打印都是局部打印,这样就导致页面代码局部取出后,在新的页面中样...
二、我的Print.js配置如下,没有起到作用 let style = "@media print { .payTotalPrint .el-table tbody tr td:nth-child(1) { width:500px; } }"; printJS({ printable: this.printData, properties: this.confirmField, header: this.printTitle, type: "json", style: style, css: ["https://...
1.用到print.js 自行安装 安装完成后 引用 import printJS from 'print-js'; 2.用到深拷贝 深拷贝代码:(可以将此代码放在一个页面中,对此进行引用即可,例如:放在until文件中,引用代码 import { deepClone } from '@/utils/index') export function deepClone(source) { ...
二、我的Print.js配置如下,没有起到作用 let style = "@media print { .payTotalPrint .el-table tbody tr td:nth-child(1) { width:500px; } }"; printJS({ printable: this.printData, properties: this.confirmField, header: this.printTitle, type: "json", style: style, css: ["https://...
在这个例子中,当用户点击“打印页面”按钮时,会调用printPage方法,该方法使用printJS函数打印id为content-to-print的div元素。 4. 配置print-js的打印参数(可选) print-js提供了多种配置选项,允许你自定义打印行为。例如,你可以指定打印内容的类型(html、json、raw-html等),设置打印样式,甚至指定打印的页眉和页脚等...
// let assetPrintTableLen = document.getElementById("showHeight_0").clientHeight; // console.log(assetPrintTableLen) setTimeout(()=>{ this.$print(this.$refs.modalContainer) }) } } } .printAccount{ border:2px solid #000; border-top:none...