vue之打印表格的实现

安装：yarn add vue-print-nb
局部引入：import print from "vue-print-nb";
挂载指令：directives: { print, },

实现简单的打印

操作：
- 1：<button v-print="'#printTable'">打印table</button>
- 2：<div id="printTable"></div>

<template><div class="home">model {{ model }}<x-from :model="model" labelWidth="80px" id="printTable"><x-form-item label="用户名"><x-inputplaceholder="请输入用户名："v-model="model.username"></x-input></x-form-item><x-form-item label="开关"><x-switchv-model="model.flag"activeColor="red"inActiveColor="green"name="username"></x-switch></x-form-item></x-from><button v-print="'#printTable'">打印table</button></div>
</template><script>
import XInput from "./Test/Input.vue";
import XSwitch from "./Test/Switch.vue";
import XFrom from "./Test/form/Form.vue";
import XFormItem from "./Test/form/FormItem.vue";
import print from "vue-print-nb";
export default {name: "Home",directives: {print,},components: {XInput,XSwitch,XFrom,XFormItem,},data() {return {// form 绑定的数据model: {username: "",flag: false,},};},methods: {},
};
</script>
<style lang="scss" scoped>
.home {height: calc(100% - 34px);width: calc(100% - 34px);background: #fff;padding: 16px;border: 1px solid #ccc;
}
</style>

vue之打印表格的实现相关推荐

vue中打印表格，打印不全的问题
vue中打印表格,打印不全的问题 html部分 <TableDetailsclass="table-box"ref="inventoryDetails"& ...
vue+elementui 打印表格不显示表格边框线
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线,可以通过在 CSS 中覆盖样式来解决. 可以在项目中新建一个 CSS 文件,如 print.cs ...
html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...
vue + elment ui打印表格数据
vue + elment ui打印表格数据主要的原理就是在vue项目中通过调用浏览器自带的打印功能,完成对table数据的打印解决表格错位以及elment ui 双重表头的问题封装一下打印 ...
Vue.js ：使用LODOP打印表格文件
用到的打印工具是LODOP. 项目环境是vue-cli搭建的,组件库是ant design vue. 1.在需要打印的页面引入插件. <script>import { getLodop } ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
vue中printJS打印表格---json
使用html的方式打印表格总是不在A4纸的正中间出现的问题: (1)表格的行--显示不全 (2)数据过多分页---各自会被拆分在打印html的基础上进行改进,处理复杂采用type=json来进 ...
vue + elementUI 实现表格的打印和下载
这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能,不需要调用接口,只是纯前端的一个功能实现:顺便介绍一下打印功能. 1.打印获取表格数据,调用 window 的 print 方 ...
vue 打印表格需求
最近,项目中用到打印表格的需求,在网上找了好些都不太行,不是样式缺少,就是内容缺少,基本思路还是调用window自带的print功能. 我用el-ui自带的表格,打印的时候样式内容都有一定的缺少,能成 ...

vue之打印表格的实现

目录

vue之打印表格的实现

实现简单的打印

vue之打印表格的实现相关推荐

最新文章

热门文章