分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）

2024-07-08 03:56| 来源: 网络整理| 查看: 265

想写一个很普通的那种像word文档样式的table，发现网上很多都是什么教程，没有合适的，我只想要一个拿来就能用的html的table（非专业前端），没有什么别的依赖，而且样式要很普通的简单的表格。既然没有合适的，那我分享一个吧。以及记录一下在vue里面如何让浏览器弹出打印框打印这个表格table（一个在git上发现的好用的打印插件，不用install进项目，直接存一个js文件就能用，简单好用的vue打印插件）

下面代码粘贴出来另存为html文件就能直接用，没有别的依赖，先看效果图在这里插入图片描述

html的table

个人简历基本信息姓名性别出生年月民族汉婚否政治面貌籍贯学历现所在地毕业院校所在专业电子邮箱手机号码教育经历起止时间毕业院校/教育机构专业/课程工作经历起止时间公司名称职位爱好技能自我评价 .table{ border-collapse: collapse; border-spacing: 0; background-color: transparent; display: table; width: 100%; max-width: 100%; width: 800px; margin:0 auto; } .table td{ text-align:center; vertical-align:middle; font-size: 14px; font-family: 'Arial Normal', 'Arial'; color: #333333; padding: 8px 12px; } .table-bordered { border: 1px solid #ddd; } *{ margin: 0px; padding: 0px; } .column{ width:30px; height:30px; border:1px solid #333; background: #f1f1f1; } .value{ width:70px; height:30px; border:1px solid #333; } 一、我的项目是vue项目，所以先把上面的html代码转成vue的页面个人简历基本信息姓名性别出生年月民族汉婚否政治面貌籍贯学历现所在地毕业院校所在专业电子邮箱手机号码教育经历起止时间毕业院校/教育机构专业/课程工作经历起止时间公司名称职位爱好技能自我评价 export default { data() { return { }; }, props: [''], watch:{ }, computed: { }, created() { }, mounted() { setTimeout( ()=>{ //延迟0.5秒弹出打印 //不延迟可能document还没有更新，因为数据会从后端读取出来没那么快渲染到页面 this.$print(this.$refs.print) }, 500) }, } .table{ border-collapse: collapse; border-spacing: 0; background-color: transparent; display: table; width: 100%; max-width: 100%; width: 800px; margin:0 auto; } .table td{ text-align:center; vertical-align:middle; font-size: 14px; font-family: 'Arial Normal', 'Arial'; color: #333333; padding: 8px 12px; } .table-bordered { border: 1px solid #ddd; } *{ margin: 0px; padding: 0px; } .column{ width:30px; height:30px; border:1px solid #333; background: #f1f1f1; } .value{ width:70px; height:30px; border:1px solid #333; } 二、把下面的代码另存为一个print.js文件，在main.js文件里面引入这个print.js //在main.js引入下面的print.js文件 import Print from '@/common/print' // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this.dom = document.querySelector(dom); } else { this.isDOM(dom) this.dom = this.isDOM(dom) ? dom : dom.$el; } this.init(); }; Print.prototype = { init: function () { var content = this.getStyle() + this.getHtml(); this.writeIframe(content); }, extend: function (obj, obj2) { for (var k in obj2) { obj[k] = obj2[k]; } return obj; }, getStyle: function () { var str = "", styles = document.querySelectorAll('style,link'); for (var i = 0; i

【本文地址】

公司简介

联系我们