layui打印html页面转成pdf

最新推荐文章于 2024-07-31 17:38:22 发布
最新推荐文章于 2024-07-31 17:38:22 发布
阅读量2k 收藏 1
点赞数
文章标签： javascript 前端 php ViewUI
原文链接：http://www.cnblogs.com/zeussbook/p/9996905.html
版权 
<!DOCTYPE html>
<html lang="zh">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
        <script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
                <script language="javascript">
    function preview(oper)
    {
        if (oper < 10){
            bdhtml=window.document.body.innerHTML;//获取当前页的html代码
            sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
            eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
            prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
            window.document.body.innerHTML=prnhtml;
            window.print();
            window.document.body.innerHTML=bdhtml;
        } else {
            window.print();
        }
    }
</script>
            <!--打印-->
</head>
<body>
    <style type="text/css">
            .layui-tab-item{
                margin-top: 100px;
            }
            .layui-this{
                    background-color: orange;
            }
        </style>
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">
            <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄1</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </li>
        <!--标签1-->
        <li>
        <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄2</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </li>
         <!--标签2-->
        <li>
        <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄2</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </li>
        <!--标签3-->
        <li>
        <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄2</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </li>
       <li>
           <!--标签4-->
        <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄2</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </li>
        <!--标签5-->
      </ul>
      <!--startprint1-->
    <!--打印内容开始-->
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄1</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table>
        </div>
        <!--对应1-->
        <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄2</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table></div>
        <!--对应2-->
           <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄3</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table></div>
        <!--对应3-->
            <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄4</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table></div>
        <!--对应4-->
            <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
            <tr>
                <th>年龄5</th>
                <th>身高</th>
                <th>体重</th>
                <th>疾病史</th>
            </tr>
            <tr>
                <td>61岁    </td>
                <td>161cm</td>
                <td>61kg</td>
                <td>高血压、糖尿病</td>
            </tr>
        </table></div>
        <!--对应5-->
      </div>
      <!--打印内容结束-->
    <!--endprint1-->

</div>
<div class="layui-inline" title="打印"  onclick=preview(1) ><i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;">&#xe621;</i></div>
<!--     <input type=button name='button_export' title='打印' οnclick=preview(1) value=打印1>-->

<script>
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/zeussbook/p/9996905.html

denghe4720
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui单据打印_layui打印html页面转成pdf
weixin_34681072的博客
02-17 484
Documentfunction preview(oper){if (oper < 10){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="";//设置打印开始区域eprnstr="";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从...
layui + java pdf导出
qq_41235846的博客
09-11 1539
// 控制层： pdf导出 public void getPDF (String id, HttpServletResponse response) throws ParseException { // response返回给前端下载显示 Map<String,String> map = new HashMap<>(); // map里存你需要导出的数据...
layui导出html到pdf,layui打印html页面转成pdf
weixin_34178408的博客
06-27 755
Documentfunctionpreview(oper){if(oper< 10){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="";//设置打印开始区域eprnstr="";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18);//从开始代码...
layui+jsp框架下实现对pdf或图片预览功能
最新发布
懒人w的博客
07-31 424
button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><h5 class="modal-title" id="pdfModalLabel">PDF 预览</h5>对上传的文件实现预览功能，文件类型为图片或pdf。jQuery 应在 Bootstrap 之前加载。
layui打印
qq_42744664的博客
10-09 867
$('.prints').click(function (tablelayid) { var v = document.createElement("div"); var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th...
最新layui离线pdf文档layui-v2.68.pdf
10-13
它适用于后端开发者，使他们无需深入了解前端工具就能快速搭建网页界面。Layui支持所有主流浏览器，除了IE6和IE7，因此它被认为是Web界面速成开发的良好方案。 Layui的模块化规范被定义为「经典模块化」，这一点...
纯前端将网页导出pdf文件
qq_39280563的博客
11-29 2985
使用插件：jspdf +html2canvas，html2canvas将节点绘制成图片，然后jspdf再导出。 优点：可以指定导出DOM，配置贼简单（其实浏览器右键-->打印-->另存为pdf文件也挺方便哒，但是很多人不知道呀）。 引入js文件（快夸我，别人都是让你们自己去网上找，给的本地文件引用地址）： <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"&...
LayUI开发文档.pdf
08-01
layui后台模版-v1.1, 包括说明文档
layui自定义打印
热门推荐
星银色飞行船的博客
03-29 1万+
目录 自带的打印功能的实现 自定义打印内容的实现 自定义打印table的实现 一、 自带的打印功能的实现 在layui官网下载新的layui的js文件，有些旧版本的不支持 在table数据赋值时，添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现 ......
Layui参考手册.pdf
10-20
layui 2.5.6 离线文档，带目录，是使用layui前端人员一份不可多得的参考文档。layui更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来
layui的表格table选中数据后可打印本行数据
10-26
layui的表格table选中数据后可打印本行数据,未打印时不显示，只在打印页面显示打印内容。只是做了一个简单的demo，页面需要自己去画，方法已实现。有具体的指导步骤
layui表格导出Excel，js对象属性循环.pdf
12-16
layui表格导出Excel，js对象属性循环
layuiAdminprov1.x【单页版】开发者文档.pdf
08-02
layuiadmin api 帮助文档 单页版pdf文件 使用layuiadmin的必备利器放心下载
Layui+Ajax带打印功能的管理系统.zip
07-31
该系统包含了权限管理、模块管理、配置管理和页面打印功能，代码齐全，sql脚本也包含在内，可正常运行，三周的任务量，仅供大家学习，可作为项目设计使用
【html转pdf】html页面导出为pdf文件，纯html版本，简单实现pdf转换【html2canvas+jspdf】
seeeeeeeeeee的博客
10-18 8361
最近遇到的需求，把html转成pdf文件下载导出。目前网上看了下，有三种方法，但是其中两种需要后端配合一种是纯前端实现的，比较简单。所以就使用了这种。也就是html2canvas + jspdf 的这种方法这种方法实现的思路就是，通过html2canvas 把元素内的数据截图出来成一个图片然后把这个图片通过jspdf 方法转成pdf格式输出出来但是也有缺点，就是只是一个图片，而且清晰度也没有那么高。只能说勉强实现一个需求，先应付一下，后续会继续看其他的写法，然后更新。
layui导出html到pdf,Layui导出所有数据的例子_梵醉_前端开发者
weixin_36416418的博客
06-27 745
layui自带的导出，是导出当前页的数据，以下方法是导出所有数据导出//导出function excl_rep() {var SH=$("#type").val();//汇总分类var SER = $("#ser_row").val(),ONETYPE = $("#type_one").val(),//一级分类TWOTYPE = $('#type_two').val();//二级分类var BRA...
纯前端 -- html转pdf插件总结
努力的nana
08-11 7680
pdfmake默认不支持中文，所以需要安装字体文件。
实现layui和java导出成pdf格式
06-07
要实现 layui 和 Java 导出 PDF 格式，可以借助 iText 这个 Java PDF 库。以下是一个简单的示例代码： 1. 在前端页面中添加一个导出按钮： ```html <button class="layui-btn layui-btn-sm" id="exportBtn">导出 PDF</button> ``` 2. 在前端页面中引入 layui 和 jQuery 库，并编写导出功能的 JavaScript 代码： ```javascript // 导出 PDF $("#exportBtn").on("click", function() { // 获取表格数据 var tableData = []; $("#tableId tbody tr").each(function() { var row = []; $(this).find("td").each(function() { row.push($(this).text()); }); tableData.push(row); }); // 发送请求导出 PDF $.ajax({ url: "/exportPdf", type: "POST", data: JSON.stringify(tableData), contentType: "application/json; charset=utf-8", responseType: "blob", success: function(response) { // 下载 PDF 文件 var blob = new Blob([response], {type: "application/pdf"}); var filename = "table.pdf"; var downloadUrl = window.URL.createObjectURL(blob); var a = document.createElement("a"); a.href = downloadUrl; a.download = filename; a.click(); window.URL.revokeObjectURL(downloadUrl); } }); }); ``` 3. 在后端 Java 代码中，使用 iText 生成 PDF 文件： ```java @PostMapping("/exportPdf") public ResponseEntity<byte[]> exportPdf(@RequestBody List<List<String>> tableData) throws Exception { // 创建 PDF 文档 ByteArrayOutputStream baos = new ByteArrayOutputStream(); PdfWriter.getInstance(new Document(), baos); Document document = new Document(); PdfWriter.getInstance(document, baos); document.open(); // 创建 PDF 表格 PdfPTable table = new PdfPTable(tableData.get(0).size()); for (List<String> row : tableData) { for (String cell : row) { table.addCell(cell); } } document.add(table); // 关闭 PDF 文档 document.close(); // 返回 PDF 文件内容 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", "table.pdf"); return new ResponseEntity<byte[]>(baos.toByteArray(), headers, HttpStatus.OK); } ``` 这段代码会将前端传来的表格数据生成为一个 PDF 文件，并将该文件以字节数组的形式返回给前端。前端代码会在收到该字节数组后将其下载为一个名为 "table.pdf" 的文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值