在ElementUI中打印表格数据,你可以按照以下步骤进行操作: 确定ElementUI表格数据结构和内容: 首先,你需要确定你的表格数据结构。这通常涉及到定义表格的列和数据源。 使用JavaScript或Vue.js方法获取表格数据: 你可以使用Vue.js的数据绑定特性来获取表格的数据。例如,如果你的表格数据绑定在tableData变量上,那么tableData...
可能会造成样式错乱,比如你页面有table,打印弹出层的table,这样修改样式有可能会导致页面表格行错位,解决办法:在页面的标签上加id或者class,比如table-d,修改less样式如下 <style> .table-d>>>table { table-layout: auto !important; } .table-d>>>.el-table__header-wrapper .el-table__header { width: ...
// 定义element-ui table组件的样式 const tabStyle = `<style> table{width:100%;display:table-cell!important;box-sizing:border-box;} .el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;} table,table tr th, table tr td { ...
targetStyles: ['*'], style: printStyle(),// 打印的内容是没有css样式的,所以此处需要string类型的css样式,必须是css,因为识别不了less scanStyles:false, }) }, printStyle.js文件,设置table的样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
[i]+'</td>'}newHTML+='</tr>'div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin',newHTML)// 将新的 DIV 添加到页面 打印后再删掉document.querySelector('body').appendChild(div)printJS({printable:printDOMID,type:'html',scanStyles:false,style:'table { border...
<el-button type="primary" @click="handlePrint">打印</el-button> <div id="print-section" style="display: none;"> <el-card> <h1>打印标题</h1> <p>这是打印内容的一部分。</p> <el-table :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> ...
newHTML +='</tr>'div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)// 将新的 DIV 添加到页面 打印后再删掉document.querySelector('body').appendChild(div)printJS({printable: printDOMID,type:'html',scanStyles:false,style:'table { border-collapse: co...
element-ui表格打印 打印需要⽤到的组件为 普通表格打印 ⼀般的表格打印直接仿照组件提供的例⼦就可以了。printJS({ printable: id, // DOM id type: 'html',scanStyles: false,})element-ui 表格打印 element-ui 的表格，表⾯上看起来是⼀个表格，实际上是由两个表格组成的。表头为⼀个表格，表体...
newHTML +='</tr>'div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)// 将新的 DIV 添加到页面 打印后再删掉document.querySelector('body').appendChild(div)printJS({printable: printDOMID,type:'html',scanStyles:false,style:'table { border-collapse: co...
vue实现打印elementUI的table表格的时候,表格内有滚动条,打印预览的时候,滚动条下的数据显示不全;使用的是printJS插件;应该如何解决这个问题?const style = '@page { margin: 20px } @media print { } ' printJS({ printable: 'printTable', type: 'html', style: style, css:"https://cdn.bootcss.com...