devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

解决vue-print插件打印时表格宽度无法撑满自适应_elementui表格宽度撑满

作者：Cpp五条 | 2024-02-19 06:04:11

赞

踩

elementui表格宽度撑满

最近帮同事解决一个前端页面布局问题，技术背景vue+elementui，出现问题如下：点击详情表格布局一切正常（列数不固定，估计后端返回决定）点击打印之后的表格出现不能撑满，多出空白列的情况。

 未点击打印时布局展示

 经过各种调试主要解决由：tableLayout属性用来显示表格单元格、行、列的算法规则

①auto：（默认值）列宽度由单元格内容设定；

 ②fixed: 列宽由表格宽度和列宽度设定；

 ③inherit：规定应该从父元素继承table-layout属性的值。

/设置表格布局算法*/
 table{
     table-layout:auto!important;
}

和重新给elementui的表格内的宽度一定要设置成100%,.el-table__header和.el-table__body这个是框架内置的一些样式，得css重新更改

.el-table__header{
  width: 100%!important;
}
.el-table__body{
  width: 100%!important;
}

附带让表格内容超过自适宽度就换行

word-wrap: normal!important;
width: auto!important;
word-break: break-all!important;

修改完成后打印的表格展示就正常了 

 其中打印print.js

  1. // 打印类属性、方法定义
  2. /* eslint-disable */
  3. const Print = function (dom, options) {
  4.   if (!(this instanceof Print)) return new Print(dom, options);
  5.  
  6.   this.options = this.extend({
  7.     'noPrint': '.no-print'
  8.   }, options);
  9.  
  10.   if ((typeof dom) === "string") {
  11.     this.dom = document.querySelector(dom);
  12.   } else {
  13.     this.isDOM(dom)
  14.     this.dom = this.isDOM(dom) ? dom : dom.$el;
  15.   }
  16.  
  17.   this.init();
  18. };
  19. Print.prototype = {
  20.   init: function () {
  21.     var content = this.getStyle() + this.getHtml();
  22.     this.writeIframe(content);
  23.   },
  24.   extend: function (obj, obj2) {
  25.     for (var k in obj2) {
  26.       obj[k] = obj2[k];
  27.     }
  28.     return obj;
  29.   },
  30.  
  31.   getStyle: function () {
  32.     var str = "",
  33.       styles = document.querySelectorAll('style,link');
  34.     for (var i = 0; i < styles.length; i++) {
  35.       str += styles[i].outerHTML;
  36.     }
  37.     str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
  38.  
  39.     return str;
  40.   },
  41.  
  42.   getHtml: function () {
  43.     var inputs = document.querySelectorAll('input');
  44.     var textareas = document.querySelectorAll('textarea');
  45.     var selects = document.querySelectorAll('select');
  46.  
  47.     for (var k = 0; k < inputs.length; k++) {
  48.       if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
  49.         if (inputs[k].checked == true) {
  50.           inputs[k].setAttribute('checked', "checked")
  51.         } else {
  52.           inputs[k].removeAttribute('checked')
  53.         }
  54.       } else if (inputs[k].type == "text") {
  55.         inputs[k].setAttribute('value', inputs[k].value)
  56.       } else {
  57.         inputs[k].setAttribute('value', inputs[k].value)
  58.       }
  59.     }
  60.  
  61.     for (var k2 = 0; k2 < textareas.length; k2++) {
  62.       if (textareas[k2].type == 'textarea') {
  63.         textareas[k2].innerHTML = textareas[k2].value
  64.       }
  65.     }
  66.  
  67.     for (var k3 = 0; k3 < selects.length; k3++) {
  68.       if (selects[k3].type == 'select-one') {
  69.         var child = selects[k3].children;
  70.         for (var i in child) {
  71.           if (child[i].tagName == 'OPTION') {
  72.             if (child[i].selected == true) {
  73.               child[i].setAttribute('selected', "selected")
  74.             } else {
  75.               child[i].removeAttribute('selected')
  76.             }
  77.           }
  78.         }
  79.       }
  80.     }
  81.  
  82.     return this.dom.outerHTML;
  83.   },
  84.  
  85.   writeIframe: function (content) {
  86.     var w, doc, iframe = document.createElement('iframe'),
  87.       f = document.body.appendChild(iframe);
  88.     iframe.id = "myIframe";
  89.     //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
  90.     iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
  91.     w = f.contentWindow || f.contentDocument;
  92.     doc = f.contentDocument || f.contentWindow.document;
  93.     doc.open();
  94.     doc.write(content);
  95.     doc.close();
  96.     var _this = this
  97.     iframe.onload = function(){
  98.       _this.toPrint(w);
  99.       setTimeout(function () {
  100.         document.body.removeChild(iframe)
  101.       }, 100)
  102.     }
  103.   },
  104.  
  105.   toPrint: function (frameWindow) {
  106.     try {
  107.       setTimeout(function () {
  108.         frameWindow.focus();
  109.         try {
  110.           if (!frameWindow.document.execCommand('print', false, null)) {
  111.             frameWindow.print();
  112.           }
  113.         } catch (e) {
  114.           frameWindow.print();
  115.         }
  116.         frameWindow.close();
  117.       }, 10);
  118.     } catch (err) {
  119.       console.log('err', err);
  120.     }
  121.   },
  122.   isDOM: (typeof HTMLElement === 'object') ?
  123.     function (obj) {
  124.       return obj instanceof HTMLElement;
  125.     } :
  126.     function (obj) {
  127.       return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
  128.     }
  129. };
  130. const MyPlugin = {}
  131. MyPlugin.install = function (Vue, options) {
  132.   // 4. 添加实例方法
  133.   Vue.prototype.$print = Print
  134. }
  135. export default MyPlugin

print.css样式

  1. @media print {
  2.  
  3.     section{
  4.         margin-top: -35px;
  5.     }
  6.     .el-table__header{
  7.       width: 100%!important;
  8.     }
  9.     .el-table__body{
  10.       width: 100%!important;
  11.     }
  12.   .el-table__header{
  13.     table-layout: auto;
  14.     }
  15.   .el-table__body{
  16.     table-layout: auto!important;
  17.   }
  18.  
  19.   .modal-body {
  20.     min-height: auto;
  21.   }
  22.  
  23.   .el-table--border th, .el-table--border td{
  24.     border-right: 1px solid #ebeef5;
  25.   }
  26.   .el-table th, .el-table td{
  27.     padding: 0px;
  28.   }
  29.   .el-table .cell{
  30.     padding-right: 0px;
  31.   }
  32.   .el-table{
  33.     width: 100%!important;
  34.   }
  35. }

具体vue页面部分关键代码

  1. <template>
  2.   <div id="associateInfo">
  3.     <v-breadcrumb :title="vBreadCrumbData"></v-breadcrumb>
  4.     <div class="pull-right">
  5.       <span class="fa fa-print fa-2x" @click="printContent()" style="cursor: pointer"></span>
  6.       <span>&nbsp</span>
  7.     </div>
  8.     <div style="margin-top: 10px;padding: 0px 15px;">
  9.  
  10.       <div id="printDiv" style="width: 50%;margin-left: 25%;">
  11.         <section ref="print">
  12.           <div style="width: 90%;margin-left: 5%;line-height:2;font-size: 20px;">
  13.             
  14.             <div id="extra" style="page-break-before: always;">
  15.               <hr id="printHidden">
  16.               <div style="color: #000000;font-size: 16px;">附件：协查信息表
  17.                 <el-button v-if="associate.assistOrgId == currentOrgId && !isOpenSendBack" @click="isOpenSendBack=true"
  18.                            style="float: right" type="danger" size="mini" round>退回
  19.                 </el-button>
  20.                 <span v-if="isOpenSendBack" style="float: right">
  21.                 <el-button data-toggle='modal' href="#modal-send-back" type="success" size="mini" round>确定</el-button>
  22.                 <el-button @click="isOpenSendBack=false" size="mini" round>取消</el-button>
  23.               </span>
  24.               </div>
  25.               <div v-for="(value,index) in dynamicTable" style="padding-bottom: 10px;">
  26.                 <div style="font-size:16px">{{value.table_name}}</div>
  27.  
  28.                 <el-table
  29.                   :data="associate.tableDataList[value.table_key]"
  30.                   border
  31.                   style="width: 100%; border: 1px solid #ebeef5;">
  32.                   <el-table-column v-for="(item,idx) in value.column_key" :key="idx" :label="item.column" width="auto"
  33.                                    :property="item.key" align="center" :cell-style="timeStyle">
  34.                     <template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
  35.                   </el-table-column>
  36.  
  37.                   <el-table-column v-if="isOpenSendBack" align="center" prop="id" label="操作">
  38.                     <template slot-scope="scope"><input type='checkbox' name='checkBox1' :value=scope.row.id>
  39.                     </template>
  40.                   </el-table-column>
  41.                 </el-table>
  42.  
  43.               </div>
  44.             </div>
  45.           </div>
  46.         </section>
  47.       </div>
  48.  
  49.     </div>
  50.  
  51.   </div>
  52. </template>
  53.  
  54. <script>
  55.   import vBreadcrumb from '../../../components/common/Breadcrumb'
  56.   import vModal from '../../../components/common/modal'
  57.   import vTable from '../../../components/common/table'
  58.  
  59.   export default {
  60.     name: "associateInfo",
  61.     components: {vBreadcrumb, vTable, vModal},
  62.     data() {
  63.       return {
  64.         vBreadCrumbData: [
  65.           {name: '详情', url: '#'},
  66.         ],
  67.         associate: {
  68.           associateContent: {
  69.             title: "",
  70.             receiver: "",
  71.             content: "",
  72.             contacts: "",
  73.             phone: "",
  74.             fax: "",
  75.             email: "",
  76.             createOrgName: "",
  77.             time: ""
  78.           },
  79.           tableDataList: [],
  80.         },
  81.         dynamicTable: [],
  82.        
  83.       }
  84.     },
  85.     methods: {
  86.       printContent(){
  87.         this.$print(this.$refs.print)
  88.       },
  89.      
  90.     },
  91.   }
  92. </script>
  93. <style lang="scss">
  94.   @import "../../../../static/print/print.css";
  95.   #associateInfo {
  96.     .modal-body {
  97.       min-height: auto;
  98.     }
  99.  
  100.     .el-table__header{
  101.       table-layout: auto;
  102.     }
  103.     .el-table__body{
  104.       table-layout: auto!important;
  105.     }
  106.     .el-table--border th, .el-table--border td{
  107.       border-right: 1px solid #ebeef5;
  108.     }
  109.     .el-table th, .el-table td{
  110.       padding: 0px;
  111.       word-wrap: normal!important;
  112.       width: auto!important;
  113.       word-break: break-all!important;
  114.     }
  115.     .el-table .cell{
  116.       padding-right: 0px;
  117.     }
  118.   }
  119. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/113033
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号