vue打印表格

已于 2024-01-12 16:52:23 修改
阅读量545 收藏 9
点赞数 6
文章标签： vue.js 前端 javascript
于 2024-01-12 16:50:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gaoju_liz/article/details/135556563
版权

主要用到的xmlns:th 和 “vue3-print-nb”: “^0.1.4”,
实现思路
1.前端画出需要打印表格的页面，可以用纯原生css、html
例如：在这里插入图片描述

<body>
    <div style="font-size: 12px;color:#74798C;">
        <section style="margin-top: 10px;">

            <table style="width: 100%;border: 1px solid black;border-collapse:collapse;">
                <tbody>
                    <tr>
                        <td style="border:1px solid black;text-align:center;width:5%;color:black;font-weight: bold; line-height: 30px;font-size: 16px;"
                            colspan="8">22222222222222222222222222222</td>
                        </td>
                    </tr>
                    <tr>
                        <td style="border:1px solid black;text-align:center;width:5%;color:#74798C;writing-mode:vertical-lr;letter-spacing: 18px;"
                            rowspan="8">11111111</td>
                        <td style="border:1px solid black;width:10%;text-align: center;color:#74798C;height: 40px;">
                            22222</td>
                        <td style="border:1px solid black;width:15%;text-align: center;color:#74798C;">
                            <span th:text="${realname}"></span>
                        </td>
                        <td style="border:1px solid black;width:10%;text-align: center;color:#74798C;">
                            33333</td>
                        <td style="border:1px solid black;width:15%;text-align: center;color:#74798C;" colspan="6">
                            <span th:text="${applyDate}"></span>
                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">11111</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;">
                            <span th:text="${name}"></span>
                        </td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;">22222222</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="6">
                            <span th:text="${budget}"></span>
                        </td>

                    </tr>

                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">333333</td>
                        <td style="border:1px solid black;text-align: left;color:#74798C; " colspan="8">
                            <div style="margin-left: 20px;">
                                <input type="checkbox" th:checked="${beckonpickStyle1}"
                                    style="margin: 0px;line-height: 40px;">
                                <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111</span>
                                <input type="checkbox" th:checked="${beckonpickStyle2}"
                                    style="margin: 0px;line-height: 40px;">
                                <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111</span>
                                <input type="checkbox" th:checked="${beckonpickStyle3}"
                                    style="margin: 0px;line-height: 40px;">
                                <span style="line-height: 40px; display: inline-block;margin-right: 14px;">222222</span>
                                <input type="checkbox" th:checked="${beckonpickStyle4}"
                                    style="margin: 0px;line-height: 40px;">
                                <span style="line-height: 40px; display: inline-block;margin-right: 14px;">3333333</span>
                            </div>

                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">111111</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;">
                            <span th:text="${deadline}"></span>
                        </td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;">111111</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="6">
                            <span th:text="${handleName}"></span>
                        </td>
                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">2222222</td>
                        <td style="border:1px solid black;text-align: left;color:#74798C;" colspan="8">
                            <!-- <span th:text="${idCard}"></span> -->
                            <div style="margin-left: 20px;">
                                <input type="checkbox" th:checked="${beckonpickMoney1}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">1111111</span>
                            <input type="checkbox" th:checked="${beckonpickMoney2}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111111</span>
                            </div>
                            

                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">22222222</td>
                        <td style="border:1px solid black;text-align: left;color:#74798C;" colspan="8">
                            <div style="margin-left: 20px;">
                            <input type="checkbox" th:checked="${beckonpickBuy1}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">1111111</span>
                            <input type="checkbox" th:checked="${beckonpickBuy2}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">22222222</span>
                            <input type="checkbox" th:checked="${beckonpickBuy3}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">33333333</span>
                        </div>

                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">1111111</td>
                        <td style="border:1px solid black;text-align: left;color:#74798C;" colspan="8">
                            <div style="margin-left: 20px;">
                            <input type="checkbox" th:checked="${beckonpickBuytype1}"
                                style="margin: 0px;line-height: 40px;">
                            <span
                                style="line-height: 40px; display: inline-block;margin-right: 4px;margin-right: 4px;">2222222</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype2}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">33333333</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype3}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111111</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype4}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111111</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype5}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">1111111</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype6}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">22222222</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype7}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">333333333</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype8}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">444444444</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype9}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111111</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype10}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">22222222</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype11}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">3333</span>
                            <input type="checkbox" th:checked="${beckonpickBuytype12}"
                                style="margin: 0px;line-height: 40px;">
                            <span style="line-height: 40px; display: inline-block;margin-right: 14px;">11111</span>
                        </div>
                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align: center;color:#74798C;">1111111</td>
                        <td style="border:1px solid black;text-align: left;color:#74798C;" colspan="8">
                            <div style="margin-left: 20px;">
                                <input type="checkbox" th:checked="${beckonpickEffect1}"
                                    style="margin: 0px;line-height: 40px;">
                                <span
                                    style="line-height: 40px; display: inline-block;margin-right: 4px;margin-right: 4px;">333333</span>
                            </div>
                            <div  style="margin-left: 20px;"> 
                                <input type="checkbox" th:checked="${beckonpickEffect2}"
                                    style="margin: 0px;line-height: 40px;">
                                <span
                                    style="line-height: 40px; display: inline-block;margin-right: 4px;margin-right: 4px;">3333333</span>
                            </div>
                            <div  style="margin-left: 20px;">
                                <input type="checkbox" th:checked="${beckonpickEffect3}"
                                    style="margin: 0px;line-height: 40px;">
                                <span
                                    style="line-height: 40px; display: inline-block;margin-right: 4px;margin-right: 4px;">1111111</span>
                            </div>
                        </td>

                    </tr>

                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align:center;width:50px;color:#74798C;" colspan="2">11111
                        </td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="8">
                            <span th:text="${idCard}"></span>
                        </td>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align:center;width:50px;color:#74798C;" colspan="2">
                            222222</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="8">
                            <span th:text="${idCard}"></span>
                        </td>
                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align:center;width:50px;color:#74798C;" colspan="2">
                            3333333</td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="8">
                            <span th:text="${idCard}"></span>
                        </td>
                    </tr>
                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align:center;width:50px;color:#74798C;" colspan="2">1111111
                        </td>
                        <td style="border:1px solid black;text-align: center;color:#74798C;" colspan="8">
                            <span th:text="${idCard}"></span>
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="border:1px solid black;text-align:left;width:5%;color:#74798C; line-height: 10px;font-size: 10px;"
                            colspan="8">
                            <div style="margin-left: 20px;margin-top: 10px;">
                                说明:
                            </div>
                            <div style="margin-left: 20px;">
                                <p>1.111111111111111</p>
                            </div>
                            <div style="margin-left: 20px;">
                                <p> 2.11111111111111111111</p>
                            </div>

                        </td>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</body>

代码效果如下
在这里插入图片描述

2.在vue3的页面用到弹框形式

<a-button type="primary" preIcon="ant-design:printer-outlined" @click="handlePrint(selectedRowKeys)">

selectedRowKeys：选择需要打印的数据（因为我这是选择表格的某一行打印，所以selectedRowKeys代表我选择的整行数据）

2.1
弹框

<a-modal style="width: 800px" :visible="showPrint" :footer="null" :closable="false">
      <div id="printContent" v-html="htmlText"></div>
      <button ref="printRef" v-print="printObj" style="display: none"> 打印 </button>
    </a-modal>

2.2
方法

//打印
function handlePrint(arr) {
  if (arr.length != 1) {
    createMessage.warning('请选中一条数据进行打印！');
  } else {
    printTemplate({ id: arr[0] })
      .then((res) => {
        htmlText.value = res;
        showPrint.value = true;
        nextTick(() => {
          showPrint.value = false;
          printRef.value.click();
          // printJS({
          //   printable: 'printContent',
          //   type: 'html',
          //   targetStyles: ['*'],
          //   maxWidth: 1000,

          //   // style: `.changesy{margin-top:40px}`,
          // });
          // printClick.value.click();
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

这个方法中 printTemplate({ id: arr[0] })
.then 这一部分是后台接口 这个接口主要用于告诉后台前端要打印表格哪一行的数据，并且让后台给 我们实现思路 1 中的模板赋值，就是下图红框值
在这里插入图片描述

结合 2.2方法中的 htmlText.value = res; 给我们弹框中的html赋值，（其实就是接口告诉后台打印的数据，后台将数据处理后 插入到我们给到后台的html模板中，然后我们前端在赋值到我们的html中 在打印）

最后打印！

Gaoju_liz
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue前端实现excel的导入、导出、打印功能
Litt_White的博客
12-03 8274
Vue前端实现excel的导入、导出、打印功能 一、相关依赖 二、excel导入功能 三、table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格） 3.导出二维数据的table数据 4.导出合并单元格table数据 四、table导出excel表格（带样式） 1.导出带样式的excel 五、打印功能 1.直接使用window自带的打印功能： window.print() 2.使用打印插件：vue-print-nb
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
vue.js表格分页示例
10-21
主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据
使用vue-print-nb打印element table时表格打印不全的问题
热门推荐
liangyiyiliang的专栏
04-27 1万+
elment的表格设置宽度为100%之后打印还是不能将表格打印完整 如下图 1.寻找问题 为什么会出现这种情况，打开控制台查看代码 原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度 通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1388px肯定与打印纸的宽度不一致 所以导致部分区域打印不出来 2.解决思路 那就把col这里的具体宽度设置成百分比就OK了...
reportdesign基于lodop的vue简单打印设计工具
08-10
reportdesign - 基于lodop的vue简单打印设计工具
vue表格数据打印功能的实现
huxihua2006的博客
02-03 2086
vue表格数据打印
vue使用vue-print-nb实现表格打印功能
m0_62095536的博客
09-15 1482
【代码】vue使用vue-print-nb实现表格打印功能。
vue 实现打印功能
qq_53489791的博客
12-27 4585
vue 打印
vue打印表格动态数据 print-js
最新发布
under taker
11-13 330
使用print-js直接打印动态表格数据。1、安装print-js。2、在需要的页面上引入。3、打印按钮添加方法。name:'张三',
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
06-01
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑。
超好用的Vue打印插件，可支持分页
01-20
Vue打印插件
vue实现lodop打印功能的示例
01-18
3.vue部分实现 　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-on:click=btnClickPrint> <span>{{ msg }} </...
Vue实现表格的打印，数据导入，导出，完整带着依赖的项目，可以直接运行跑起来
06-05
Vue实现表格的打印，数据导入，导出，完整带着依赖的项目，可以直接运行跑起来，希望大家多多支持。
vue中打印表格功能（重点是表格制作）
飞翔༒之翼
09-11 1万+
先上效果图： 上图就是打印的效果，但表格的样式没有出来，在vue-cli脚手架里样式是起作用的。 这个打印是用的原生javascript的方法实现的，但引用了vue.js和element 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht...
vue + elment ui打印表格数据
五月慵懒的猫的博客
04-05 1770
vue + elment ui打印表格数据 主要的原理就是 在vue项目中 通过调用浏览器自带的打印功能，完成对table数据的打印 解决表格错位 以及elment ui 双重表头的问题 封装一下打印方法以便于在项目中调用 export function PrintForm(id) { // 空页面 let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; char
Vue实现数据表格的打印、导入、导出
ProChick's Blog
04-05 3918
数据表格打印、导入、导出数据表格打印一、实现当前页面数据打印二、实现全部页面数据打印数据表格导入一、HTML代码编写二、JavaScript代码编写三、导入数据表格JS代码编写数据表格导出一、安装相应插件二、导入依赖文件三、修改JS文件四、代码编写使用 数据表格打印 一、实现当前页面数据打印 利用 vue-print-nb 插件 1.安装 npm install vue-print-nb --save 2.引入 // 在main.js文件中引入 import Print from 'vue-p
vue项目中打印数据或表格（使用第三方依赖print-js）
zhengjingID的博客
03-03 3517
一、 第三方依赖print-js 资源包文档网址：https://printjs.crabbly.com/ 参数列表： 参数 默认值 说明 printable null 文档源：pdf 或图像 url、html 元素 id 或 json 数据对象。 type 'pdf' 可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。 header null 用于 HTML、图像或 ...
vue 表格打印
七七的博客
01-13 426
el-button type="primary" v-print="printObj">打 印extraCss: "", // 打印可引入外部的一个 css 文件。id: "print", // 这里是要打印元素的ID。extraHead: "", // 打印头部文字。popTitle: "", // 打印的标题。
vue 打印动态表格
10-09
在Vue中打印动态表格，你可以使用Vue的v-for指令来循环渲染表格的行和列。以下是一个简单的示例代码： ```html <template> <table> <thead> <tr> <th v-for="column in columns" :key="column">{{ column }}</th> </tr> </thead> <tbody> <tr v-for="item in items" :key="item.id"> <td v-for="column in columns" :key="column">{{ item[column] }}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { columns: ['Name', 'Age', 'Email'], items: [ { id: 1, Name: 'John Doe', Age: 25, Email: '[email protected]' }, { id: 2, Name: 'Jane Smith', Age: 32, Email: '[email protected]' }, { id: 3, Name: 'Bob Johnson', Age: 45, Email: '[email protected]' }, ] } } } </script> ``` 在这个示例中，`columns`数组定义了表格的列名，`items`数组包含了要显示的数据。在表格的头部使用v-for指令循环渲染每一列的标题，然后在表格的主体部分使用v-for指令循环渲染每一行的单元格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值