web中的打印 table打印等功能 区域打印

以前总是看到页面上有打印,不过一直没有接触到,现在在做oa,然后上网找了一下打印的js命令,其实很简单 就是window.print(),关键是如何来使用,看了一篇文章说是用iframe然后就没有声了,只是提了一下,就没有下音了,后来自己琢磨了一下,发现window.print()方法是来打印整个页面的,如果把需要打印的地方做成一个iframe页面不就可以了,所以这是一种方法;还有一种方法就是打开一个新的页面,然后把需要打印的内容,用document.write给输出到那个新打开的页面,并执行打印,第一种方法比较简单,就不多说了,就是把需要打印的内容做成一个iframe,然后在head部分加上<script type="text/javascript">window.print()</script>即可。

下面来说一下第二种方法即打印页面上特定区域,如单独的table或者单独的div等。

来看一下,代码如下:

<html>
<head>

    <script type="text/javascript">
        function printPage()
        {
            var newWin = window.open('about:blank');
            var titleHTML = document.getElementById("doctitle").innerHTML;
            newWin.document.write("<span style='color:red;'>" + titleHTML + "</span>");
            newWin.document.location.reload();
            newWin.print();
        } 
    </script>

</head>
<body>
    <div id="doctitle">
        <table border="1px">
            <tr bgcolor="red;">
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
            </tr>
        </table>
    </div>
    <a href="javascript:void(0)" οnclick="printPage() ">打印 </a>
</body>
</html>

上面的代码说明的是当点击超链接的打印的时候调用printpage方法,然后那个printpage方法,首先是打开一个新的页面,然后把获取的div中的innerhtml输出到那个新的页面中,并且在新的页面执行打印。记住了千万别忘了在需要打印的东西的外面加上一个div,这样次才能保证里面的格式不变,如果上面的代码中我们把table的id设置成doctitle,那么打印出来的就会变成<tbody></tbody>然后table的样式也不会存在了。(因为我们打印的是innerHTML而不是简单的里面的文字,我们需要的还有里面的格式。)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vxe-table是一个基于Vue.js的表格组件库,它提供了丰富的功能和灵活的配置选项。其打印功能是vxe-table的一个重要特性之一,可以方便地将表格内容导出为PDF或Excel格式的文件进行打印。 要使用vxe-table打印功能,你需要先安装vxe-table,并在Vue项目引入相应的组件和样式。然后,在需要打印的表格上添加打印按钮,并绑定相应的事件处理函数。 以下是使用vxe-table实现打印功能的一般步骤: 1. 安装vxe-table: 你可以通过npm或yarn来安装vxe-table,具体命令如下: ``` npm install vxe-table ``` 或 ``` yarn add vxe-table ``` 2. 引入vxe-table组件和样式: 在Vue项目的入口文件(通常是main.js),引入vxe-table的组件和样式,示例如下: ```javascript import 'vxe-table/lib/style.css'; import { VXETable } from 'vxe-table'; import 'vxe-table/lib/index.css'; Vue.use(VXETable); ``` 3. 在需要打印的表格上添加打印按钮: 在表格组件的模板,添加一个按钮,并绑定点击事件,示例如下: ```html <template> <div> <vxe-button @click="printTable">打印表格</vxe-button> <vxe-table :data="tableData"></vxe-table> </div> </template> ``` 4. 实现打印功能的事件处理函数: 在Vue组件的方法,实现打印功能的事件处理函数,示例如下: ```javascript methods: { printTable() { this.$refs.table.exportData({ type: 'pdf', // 导出类型为PDF filename: 'table', // 导出文件名 download: true // 是否直接下载 }); } } ``` 通过以上步骤,你就可以在vxe-table的表格上添加打印功能了。当点击打印按钮时,表格的内容将会被导出为PDF文件,并可以选择直接下载或预览打印

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值