java自定义图表并实现系统打印功能

最新推荐文章于 2024-07-23 12:30:06 发布

苏北辙

最新推荐文章于 2024-07-23 12:30:06 发布

阅读量1.4k

点赞数 1

分类专栏：各种解决方案文章标签： java javascript 前端

本文链接：https://blog.csdn.net/qq_42422368/article/details/121772207

版权

各种解决方案专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍如何在Java应用中实现自定义图表的打印功能。通过前端按钮触发AJAX请求获取数据，然后渲染到隐藏的打印界面，使用window.print()进行打印操作。后端提供接口获取图表详细信息，前端使用layui的element.js方法。关键代码包括前端的事件处理、数据渲染和打印函数，以及后端的数据获取接口。

摘要由CSDN通过智能技术生成

java自定义图表并实现系统打印功能

功能效果是自定义需要打印图表界面，点击按钮后连接打印机进行打印操作，直接上代码。

前端代码

1. 按钮相关：

<a id="print" class="btn" onclick="printing('row.id')"></i>打印</a>

2. js响应事件

    layui.use([ 'element'], function () {

        window.printing = function(id) {
            $.ajax({
                type: "post",
                url : prefix + "/getGsDetail",
                data : {
                    id: id,
                },
                dataType: "json",
                async: false,
                success: function (result) {
                    var data=result.companyBasicInfoGs;
                    //渲染值信息并且打印
                    setValues(data);
                    print_("print_");
                }
            });
        }

        function getLabel(val,arr = []) {
            let obj = arr.find(item => item.dictValue == val)
            return obj?obj.dictLabel:''
        }

        /*数据渲染*/
        function setValues(data) {
            
            //渲染企业工商信息
            document.getElementById('chName').innerHTML = data.chName;
            document.getElementById('uscd').innerHTML = data.uscd;
            document.getElementById('enName').innerHTML = data.enName;

        //打印指定地div层
        function print_(str) {
            document.body.innerHTML = document.getElementById(str).innerHTML;
            window.print();
            location.reload()
            //强制刷新
             window.history.back();
            location.reload();
        }

    })

注意点：这里引用了layui，外部调用layui方法需要额外引入对应的js，这里用到了element.js，要在static资源目录下添加element.js。

3. 自定义打印界面

<div class="main" id="print_" style="display: none;">
    <style>
        #tab td {
            padding: 7px 5px;
        }
    </style>
    <div class="body">
        <div class="title">
            <div class="div1">
                <div class="divCtn" style="height:20px">
                    <div style="text-align: center">企业工商凭证</div>
                    <div class="titleUdeLine"></div>
                </div>
            </div>
            <div class="div2">NO：
                <span id="idshow" style="color: red;font-weight: bolder"></span>
            </div>
        </div>
        <table id="tab" border="1" style="width: 100%; border-collapse: collapse;">
            
            <tr class="tempTr2">
                <td align="center">企业名称</td>
                <td align="center">
                    <span id="chName" style="color: blue;font-weight: bolder"></span>
                </td>
                <td align="center">社会统一信用代码</td>
                <td align="center">
                    <span id="uscd" style="color: blue;font-weight: bolder"></span>
                </td>
            </tr>
            <tr class="tempTr2">
                <td align="center">英文名称</td>
                <td align="center">
                    <span id="enName" style="color: blue;font-weight: bolder"></span>
                </td>
                <td align="center">法人名称</td>
                <td align="center">
                    <span id="legalName" style="color: blue;font-weight: bolder"></span>
                </td>
            </tr>
        </table>
    </div>
</div>

后端代码
这里只用到了获取详情数据的接口，如下：

@PostMapping("/getGsDetail")
@ResponseBody
public ModelMap getGsDetail(Long id)
{
    ModelMap mmap = new ModelMap();
    CompanyBasicInfoGs companyBasicInfoGs = companyBasicInfoGsService.selectCompanyBasicInfoGsById(id);
    mmap.put("companyBasicInfoGs", companyBasicInfoGs);
    return mmap;
}