Vue+Element 表格打印_vue3打印表格_㊎㊍㊌㊋㊏的博客-程序员资料
技术标签： 表格打印 vue zero 局部打印 element
Vue+Element 局部表格打印
一开始使用了print.js、Jquery.print.min.js、printArea等插件，但是使用这些插件的过程中出现了表格显示不全，样式丢失等问题。网上的办法都没有根本的解决我的问题。之后我决定通过window.print 这种方式，将需要打印的表格写入到一个新的页面中来进行打印。
//获取打印的页面内容
var print= document.getElementById('print');
var newContent = print.innerHTML;
var oldContent = document.body.innerHTML;
document.body.innerHTML = newContent;
document.getElementsByTagName('body')[0].style.zoom=0.92;
window.print();
window.location.reload();
//将原有页面还原到页面
document.body.innerHTML = oldContent;
return false;
在使用插件和window这种方式打印的时候，还会出现表头偏移的问题。
写入到新页面中，打印出来的效果如下：
通过 @page 对打印的纸张进行设置，比如：
@page{
size: A4 landscape; /*portrait： 纵向打印, landscape: 横向*/
}
通过 @media print 对表格的样式进行修改：
@media print {
.el-table thead.is-group th {
text-align: center
}
tbody {
text-align: center;
border: 1px solid #000;
}
th {
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
}
出来的效果是这样：
自己手写给表格加上了边框线，但是显示不全的问题还是没有解决。
document.getElementsByTagName('body')[0].style.zoom=0.78;
加上这行代码可以实现缩放，但是发现在不同屏幕大小的电脑上，打印的表格会出现不同偏移，单纯的通过zoom来设置并不太好。
在@media print 中添加
table,
tbody,
thead {
width: 100% !important;
}
colgroup {
position: absolute;
width: 100% !important;
}
表格显示不全是宽度的问题，给了表格一个百分比宽度，解决了表格显示不全的问题，而且也没有出现表头偏移的问题。在不同的分辨率的电脑上也可以适应，打印出来的效果也比较好。效果如下：
本人小白一个，自己搞了好多天打印功能，网上的大部分插件，办法都试了个遍，都没有很好的解决。目前的办法也不知道是否完全适用，写的不好 多见谅！
智能推荐
python 学习 - 编码_gzh9255的博客-程序员资料
python 编码问题 u'汉字'中文编码问题是用中文的程序员经常头大的问题，在python下也是如此，那么应该怎么理解和解决python的编码问题呢？python内部使用的是unicode编码，而外部却要面对千奇百怪的各种编码，比如作为中国程序经常要面对的gbk，gb2312，utf8等，那这些编码是怎么转换成内部的unicode呢？首先我们先看一下源代码文件中使用字符串的情况。源代...
PHP写日志_深度Java的博客-程序员资料
function logError($content){ $logfile = '/logs/debuglog'.date('Ymd').'.txt'; if(!file_exists(dirname($logfile))) { @File_Util::mkdirr(dirname($logfile)); } error_log(date("[Y-m-d
嵌入式系统编程之软件架构_嵌入式软件架构 能把任务当作模块吗_mndscc的博客-程序员资料
本文介绍了嵌入式系统编程软件架构方面的知识，主要包括模块划分、多任务还是单任务选取、单任务程序典型架构、中断服务程序、硬件驱动模块设计等，从宏观上给出了一个嵌入式系统软件所包含的主要元素。模块划分模块划分的"划"是规划的意思，意指怎样合理的将一个很大的软件划分为一系列功能独立的部分合作完成系统的需求。C语言作为一种结构化的程序设计语言，在模块的划分上主要依据功能（依功能进行划分在面向对象设
python 配置文件类库_基础类封装-configparser配置文件类库封装_weixin_39603397的博客-程序员资料
1 #!/usr/bin/env python32 #-*- coding: utf-8 -*-3 #@Time : 2019/10/14 23:374 #@Author : Tang Yiwei5 #@Email : [email protected] #@File : ParseConfigurationFile.py7 #@Software: PyCharm8910 fro...
Android WebView的使用攻略_安卓webview_xing.tang的博客-程序员资料
前言现在很多App都内置了Web网页，比如很多电商App，淘宝、天猫、京东、拼多多、网易考拉等等。那么它们又是如何实现的呢？这里就不得不涉及到Android的WebView控件，通过WebView去动态加载一个Web网页，所以我们将全面介绍Android WebView。目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtDd5uuk-1646325947466)(http://note.youdao.com/yws/res/16277/WEBRESOURCE
Latex表格排版（三个表格并列、单元格内容自动换行）_latex三线表自动换行_Xiaoli_Coding的博客-程序员资料
1、LaTex实现三个表格并列排版 刚接触LaTeX排版不久，表格排版一直在摸索中前进，代码中可能还存在冗余或者其他问题，欢迎大家指正我的错误.代码：\begin{table*}[!htp]\floatsetup{floatrowsep=qquad,captionskip=10pt} \tabcolsep=8pt \begin{floatrow}\begin{minip...
随便推点
Install PHP 5.6 on EC2_magic_dreamer的博客-程序员资料
Install PHP 5.6 on EC2Start with this version> wget http://ar2.php.net/distributions/php-5.6.16.tar.bz2Unzip the file> tar -xvf php-5.6.16.tar.bz2Configure that> ./configure --prefix...
Java框架-MyBatis三剑客之MyBatis Generator(mybatis-generator MBG插件)详解_zhoumouren88的博客-程序员资料
生成器设计思路: 连接数据库 -> 获取表结构 -> 生成文件1 下载与安装官网文档入口最方便的 maven 插件使用方式贴至pom 文件2 新建配置文件填充配置信息（官网示例）项目实例<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configura...
《Essential Linux Device Drivers》第8章 _w1_register_family_nhczp的博客-程序员资料
第8章 I2C协议I2C（The Inter-Integrated Circuit）及其子集SMBus（System Management Bus）均为同步串行接口，普遍存在于桌面电脑和嵌入式设备中。本
Android 平台下Cordova 调用Activity插件开发_diaobianpan6784的博客-程序员资料
首先建立一个包名为package com.JiajiaCy.CallActivity;package com.JajaCy.CallActivity;import org.apache.cordova.CallbackContext;import org.apache.cordova.CordovaPlugin;import org.apache.cordova....
程序员的进化——从学生到首席执行官_shaohui的博客-程序员资料
程序员的进化——从学生到首席执行官来自:http://www.contextfree.net/wangyg/d/proghumor/001.html--------------------------------------------------------------------------------中学阶段 10 PRINT "HELLO WORLD"
Redis 热点key_诸葛子房_的博客-程序员资料
压测报redis 热点问题(1)本地缓存(2)redis分片(加随机值)参考：https://www.cnblogs.com/rjzheng/p/10874537.html热点问题概述产生原因热点问题产生的原因大致有以下两种： 用户消费的数据远大于生产的数据（热卖商品、热点新闻、热点评论、明星直播）。 在日常工作生活中一些突发的的事件，例如：双十一期间某些热门商品...