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

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

下面代码粘贴出来另存为html文件就能直接用，没有别的依赖，先看效果图

html的table

<html>
<body><div><divstyle="margin:0 auto;"><divstyle="text-align:center;margin-top:20px;">个人简历</div><table class="table table-striped table-bordered" align="center" valign="center"><tr><td class="column" colspan="6">基本信息</td></tr><tr><td class="column">姓名</td><td  class="value"></td><td class="column">性别</td><td class="value"></td><td class="column">出生年月</td><td class="value"></td></tr><tr><td class="column">民族</td><td class="value">汉</td><td class="column">婚否</td><td class="value"></td><td class="column">政治面貌</td><td class="value"></td></tr><tr><td class="column">籍贯</td><td class="value"></td><td class="column">学历</td><td class="value"></td><td class="column">现所在地</td><td class="value"></td></tr><tr><td class="column">毕业院校</td><td class="value" colspan="3"></td><td class="column">所在专业</td><td class="value" ></td></tr><tr><td class="column">电子邮箱</td><td class="value" colspan="3"></td><td class="column">手机号码</td><td class="value" ></td></tr><tr><td class="column" colspan="6">教育经历</td></tr><tr><td class="value" colspan="2">起止时间</td><td class="value" colspan="2">毕业院校/教育机构</td><td class="value" colspan="2">专业/课程</td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="6">工作经历</td></tr><tr><td class="value" colspan="2">起止时间</td><td class="value" colspan="2">公司名称</td><td class="value" colspan="2">职位</td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="column">爱好</td><td class="value" colspan="5"></td></tr><tr ><td class="column" >技能</td><td class="value" colspan="5"style="text-align:left;"><br><br><br><br></td></tr><tr><td class="column">自我评价</td><td class="value" colspan="5"><br><br><br><br></td></tr><!--    <tr><td class="column">成本会计审核</td><td class="value" colspan="5" style="text-align:left;">通过。<br>附件名称：xxx.pdf<br>报废金额：2000元。其他审核意见。<br><div style="text-align:right;">签批人：小明   2019/09/24</div></td></tr>
--></table></div></div>
</body>
</html>
<script></script><style>.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;}</style>

一、我的项目是vue项目，所以先把上面的html代码转成vue的页面

<template><div ref="print"><div style="margin:0 auto;"><div style="text-align:center;margin-top:10px;">个人简历</div><table class="table table-striped table-bordered" align="center" valign="center"><tr><td class="column" colspan="6">基本信息</td></tr><tr><td class="column">姓名</td><td  class="value"></td><td class="column">性别</td><td class="value"></td><td class="column">出生年月</td><td class="value"></td></tr><tr><td class="column">民族</td><td class="value">汉</td><td class="column">婚否</td><td class="value"></td><td class="column">政治面貌</td><td class="value"></td></tr><tr><td class="column">籍贯</td><td class="value"></td><td class="column">学历</td><td class="value"></td><td class="column">现所在地</td><td class="value"></td></tr><tr><td class="column">毕业院校</td><td class="value" colspan="3"></td><td class="column">所在专业</td><td class="value" ></td></tr><tr><td class="column">电子邮箱</td><td class="value" colspan="3"></td><td class="column">手机号码</td><td class="value" ></td></tr><tr><td class="column" colspan="6">教育经历</td></tr><tr><td class="value" colspan="2">起止时间</td><td class="value" colspan="2">毕业院校/教育机构</td><td class="value" colspan="2">专业/课程</td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="6">工作经历</td></tr><tr><td class="value" colspan="2">起止时间</td><td class="value" colspan="2">公司名称</td><td class="value" colspan="2">职位</td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="2"></td><td class="value" colspan="2"></td><td class="value" colspan="2"></td></tr><tr><td class="column">爱好</td><td class="value" colspan="5"></td></tr><tr ><td class="column" >技能</td><td class="value" colspan="5" style="text-align:left;"><br><br><br><br></td></tr><tr><td class="column">自我评价</td><td class="value" colspan="5"><br><br><br><br></td></tr></table></div></div>
</template>
<script>export default {data() {return {};},props: [''],watch:{},computed: {},created() {},mounted() {setTimeout( ()=>{//延迟0.5秒弹出打印//不延迟可能document还没有更新，因为数据会从后端读取出来没那么快渲染到页面this.$print(this.$refs.print)}, 500)},}
</script><style lang="less">.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;}</style>

二、把下面的代码另存为一个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 < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');for (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3 < selects.length; k3++) {if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function(){_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';}
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {// 4. 添加实例方法Vue.prototype.$print = Print
}
export default MyPlugin

三、在需要打印的页面div上加 ref=“print”

四、在需要打印的按钮加上 this. $p r i n t (t h i s .$ refs.print)即可点击弹出打印框

（我这里是在加载表格完成后就弹出打印框，无需点击按钮，代码如下）

   mounted() {//用$nextTick等页面加载完才执行this.$print()，不然document可能还没有更新this.$nextTick(() => {this.$print(this.$refs.print);}},

五、刷新页面就可以看到浏览器弹出打印框了

注：
有没有发现没有背景颜色？或者打印的表格没有完整显示出来？如下操作就解决了

感谢大佬的分享，vue打印插件的源码：

vue打印插件使用方法

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

分享一个404页面（猴子动态SVG图）
404 SVG 动画分享一个比较好看的404页面! 原地址:https://codepen.io/thejohnyagiz/pen/npDyq 防止原页面失效,代码粘贴在下面 <!DOCTY ...
html利用表格制作个人简历
html利用表格制作简历 1,代码展示 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
分享一个简单好看的科技公司官网模板-纯HTML+CSS
分享一个简单好看的科技公司官网模板-纯HTML+CSS 首页: 首页的HTML源码部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
简单分享一个轻量级自动化测试框架目录结构设计
更多关于python selenium的文章,请关注我的专栏:Python Selenium自动化测试详解很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭 ...
php运行socket服务器,PHP_php简单socket服务器客户端代码实例，本篇文章分享一个简单的socket - phpStudy...
php简单socket服务器客户端代码实例本篇文章分享一个简单的socket示例,用php.实现一个接收输入字符串,处理并返回这个字符串到客户端的TCP服务. 产生一个 socket 服务端 /*文 ...
转载:::::简单分享一个轻量级自动化测试框架目录结构设计
很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭建测试框架,今天博主就放点干货,分享一个轻量级的自动化测试框架的目录结构,如下图: 分层如下: config ...
分享一个简单好用的快递查询、物流管理软件
最近有很多朋友在问,如何查快递,单号太多,怎么一键查询物流,并对物流进行管理,比如说筛选.分析或者导出呢?今天小编给大家分享一个新的快递查询.物流管理的技巧,下面一起来试试. 需要哪些工具? 快递单号 ...
分享一个二维码生成的接口，简单好用
一直收藏的一个自动生成二维码的接口,可以用于把支付地址等内容转成二维码显示. 接口地址:https://api.qrserver.com/v1/create-qr-code/?size=150x150 ...

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

一、我的项目是vue项目，所以先把上面的html代码转成vue的页面

二、把下面的代码另存为一个print.js文件，在main.js文件里面引入这个print.js

三、在需要打印的页面div上加 ref=“print”

四、在需要打印的按钮加上 this. $p r i n t (t h i s .$ refs.print)即可点击弹出打印框

五、刷新页面就可以看到浏览器弹出打印框了

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

最新文章

热门文章

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

一、我的项目是vue项目，所以先把上面的html代码转成vue的页面

二、把下面的代码另存为一个print.js文件，在main.js文件里面引入这个print.js

三、在需要打印的页面div上加 ref=“print”

四、在需要打印的按钮加上 this.print(this.print(this.print(this.refs.print)即可点击弹出打印框

五、刷新页面就可以看到浏览器弹出打印框了

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

最新文章

热门文章

四、在需要打印的按钮加上 this. $p r i n t (t h i s .$ refs.print)即可点击弹出打印框