开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

lodop table加js

Lodop是一个用于打印的ActiveX控件，在Web开发中常用于实现网页内容的打印功能，包括表格（table）的打印。当需要在打印时对表格进行特殊处理或添加JavaScript交互时，可以结合Lodop和JS来实现。

基础概念

Lodop：一款强大的Web打印控件，支持多种打印需求，如分页、分栏、背景图打印等。
JavaScript：一种脚本语言，用于实现网页与用户之间的交互，以及动态修改网页内容。

相关优势

灵活性：结合Lodop和JS，可以实现对打印内容的精确控制。
交互性：通过JS，可以在打印前动态修改表格内容，提高用户体验。
易用性：Lodop提供了丰富的API，方便开发者调用。

类型与应用场景

类型：Lodop与JS结合主要用于网页打印，特别是包含表格的复杂页面打印。
应用场景：适用于需要打印报表、发票、财务报表等包含表格的文档。

示例代码

以下是一个简单的示例，展示如何在打印前使用JS动态修改表格内容，并通过Lodop进行打印：

<!DOCTYPE html>
<html>
<head>
    <title>Lodop Table Print Example</title>
    <script type="text/javascript" src="LodopFuncs.js"></script>
    <script type="text/javascript">
        function printTable() {
            // 获取表格元素
            var table = document.getElementById("myTable");
            
            // 使用JS动态修改表格内容
            for (var i = 0; i < table.rows.length; i++) {
                table.rows[i].cells[1].innerHTML = "Modified Data";
            }
            
            // 创建Lodop对象
            var LODOP = getLodop();
            
            // 设置打印任务
            LODOP.PRINT_INIT("Table Print");
            LODOP.ADD_PRINT_TABLE(10, 10, 770, 400, table.outerHTML);
            
            // 执行打印
            LODOP.PREVIEW();
        }
    </script>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <!-- 更多表格行 -->
    </table>
    <button onclick="printTable()">Print Table</button>
</body>
</html>

遇到的问题及解决方法

打印内容与屏幕显示不一致：可能是由于CSS样式在打印时未正确应用。解决方法是在CSS中添加媒体查询，针对打印设备设置样式。
表格分页问题：Lodop提供了一些API来控制分页，如SET_PRINT_PAGESIZE和ADD_PRINT_TABLE的参数可以调整。通过合理设置这些参数，可以解决表格分页问题。
JavaScript错误：在结合Lodop和JS时，可能会遇到JavaScript错误。解决方法是检查代码语法和逻辑，确保在调用Lodop API之前，所有JS代码都已正确执行。

总之，通过结合Lodop和JS，可以实现对网页中表格的灵活打印控制，满足各种复杂打印需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Lodop打印样式问题与解决方法原

在打印预览时最后一个字会变小解决方法：把h3用div代替 2、如果图片固定在div的右下角，使用absolute布局，外层div position:relatvie;width:100% 一定要加width...如果图片特别大，在打印预览的时候图片会很模糊，需要把图片处理成小图片，一般是css样式大小的2倍即可 4、如果要打印输入框里面的内容（1）input文本框 1-1 如果输入框较少可以直接js..."> table class="table table-bordered"> <th colspan...() { LODOP = getLodop(); LODOP.PRINT_INIT("打印账单"); LODOP.SET_PRINT_STYLE("FontSize...", 16); //LODOP.SET_PRINT_STYLE("Bold", 20); //LODOP.ADD_PRINT_TEXT(50, 271, 270, 39,

4.7K5 0

调用快递鸟电子面单API实现打印电子面单接口 C#

" type="application/x-print-lodop" pluginspage="install_lodop32.exe" height="0" width="0"...> 引用打印的js js/LodopFuncs.js"> js内容: var CreatedOKLodop7766 = null;...LODOP = oEMBED; } else { if (CreatedOKLodop7766 == null) { LODOP...document.documentElement.appendChild(LODOP); CreatedOKLodop7766 = LODOP;...:========== if ((LODOP == null) || (typeof (LODOP.VERSION) == "undefined") || (LODOP.VERSION

1.6K6 0

打印部分表格（Lodop打印）原

onclick="prn1_preview()" >打印 var LODOP...(); }; function CreateOneFormPage(){ LODOP=getLodop(); LODOP.PRINT_INIT("打印演示1"); LODOP.SET_PRINT_STYLE...("FontSize",16); LODOP.SET_PRINT_STYLE("Bold",20); LODOP.ADD_PRINT_TEXT(50,231,260,39,document.getElementById...("koufei").innerHTML); var strBodyStyle="table,td,th { border: 1 solid #000000;border-collapse...:collapse } table{width:100%} td,th{height:30px;line-height:30px;padding:0 10px;text-align:left;} th.text-center

1.7K2 0

java之浏览器云打印

下载完成之后会有下面三个软件还有我们开发用的js（install_lodop32.exe/install_lodop64.exe根据安装系统版本选择安装）。 ?...新建一个html引入LodopFuncs.js方法然后看LODOP的官方api就可以。 KingYiFan测试打印 js.../LodopFuncs.js"> js。可以参考一下。

1.6K3 0

JS导出页面table到Excel表格

导出 table> 姓名... 扯淡1 18888888888 table...[endif]-->table>{table}table>' , base64 = function (s) { return...表格HTML var table = document.getElementById("tableExcel"); var ctx = { worksheet...: 'Worksheet', table: table.innerHTML }; document.getElementById("export").href = uri + base64

12.5K2 0

js奇怪的知识--console.table

注意（在 FireFox 中）console.table 被限制为只显示1000行（第一行是被标记的索引）。...1.直接输出直接进行尝试，在控制台输出 console.table console.table(["双十一", "双十二", "双十三"]); PS E:\demo> node 1.js ┌────..., "11.11") const two = new Fun("双十二", "12.12") const three = new Fun("双十三", "你是傻子吗，没有13月") console.table...3.console.table() 的应用场景前面是在通过在编辑器中使用 node.js 输出数据，看看在浏览器中输出会不会不一样的效果。

4.9K2 0

使用JS将table表格导出为excel

id="table_report" class="table table-striped table-bordered table-hover" style="margin-top:22px;" border...解决办法：table 需要加border="1"； 2、表名加粗可以加个 3、需要导出但是页面不需要显示的可以table中加display:none 4、导出的excel打开会提示不安全...应该是js导出格式的问题，强行成了excel。...JS通过base64或者blob把一个包含一个table>的串导出成xx.xls格式。而Excel可以打开html文件。这样看起来就是一个成功的Excel导出。...结果ok js代码需要引入js/xlsx.core.min.js"> //导出excel

8K3 0

JS高级前端开发群加群说明

同时也有很多同学问我高级群怎么加的？高级群里边都有一些什么人？他们都在讨论什么问题？什么阶段的人进入高级群？就这些问题，写一篇文章正面回应一下。二....现在群的组织分布是这样的，理解的状态是以下的几种，但最终的目的是想创建一个：互联网学习净土，或一个人才培养输出的基地： JS高级前端开发群，JS中级前端开发群，JS初级前端开发群，JS入门级前端开发群...JS初级前端开发群 389875212 [2000人大群]：有一年左右的工作经验，了解行业，职业的方向。具备css,js基础能力者。 ?...JS高级前端开发群 [2000人大群] ：3年前端工作经验以上，具备独立开发前端能力，有一定的带人经验，具备CTO候选人资质者。当然有深厚JS功底者，可破格邀请进入。...说明：以上各群入门群，初级群，JS中级前端开发群，JS高级前端开发群关闭正常的加群入口，由群主单方向邀请加入。不建议串群，一个账号加多个群，一旦发现直接T。

4K2 0

CSS加JS实现网页返回顶部功能

2.添加必要的CSS样式 3.然后通过JS代码实现当网页滚动100px以下，返回顶部的图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变的效果。 4.当点击a标签时，JS实现延迟滚动网页到顶部。... Document js.../jquery.min.js"> .right-bar { position: fixed

6.1K2 0

cssjshtml js 函数加不加括号的区别

结论：函数只要是要调用它进行执行的，都必须加括号。此时，函数()实际上等于函数的返回值。...当然，有些没有返回值，但已经执行了函数体内的行为，这个是根本，就是说，只要加括号的，就代表将会执行函数体代码。...另外：除了两边不加括号，也可以两边都加括号来实现函数的拷贝，而不是执行函数，如果左边无圆括号右边有圆括号，实际就是相当于产生的是一个属性而不是一个方法了，在调用的时候只用属性名或者函数名，而不需要再用函数调用运算符圆括号了

3K1 0

JS达到Web指定保存的和打印功能的内容

组件组件名称：Lodop（提供下载）须要引入的文件：lodop.cab（自己制作的）、LodopFuncs.js（必须的）、install_lodop32.exe（可选的，官方提供的exe格式插件）... table...class="tdnumber">9.19 table...type="text/javascript" src="LodopFuncs.js"> var LODOP; //声明为全局变量...(); LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一"); LODOP.SET_PRINT_STYLE("FontSize",18); LODOP.SET_PRINT_STYLE

2.4K3 0

JS实现页面复制文字时自动加版权

经亲自实践，目前可行的方法主要有如下两种：可以在任何运行使用js代码的网站中使用，比如本人在自己的博客园博客中实现了一下，可亲自测试。

4.3K3 0

lodop打印技巧与注意事项原

bootstrap的input 样式 2、打印预览的内容是input输入的内容，正常情况下，不管输入什么内容，打印预览的的内容都是input的初始value值，修改input的内容不改变html的value属性需要用js...修改属性 $('input:text').each(function(i,n){ this.setAttribute('value',this.value); } ); 接着就要安装lodop...插件，谷歌42版本以上的要安装c-lodop,通过打印设计把需要输出的文字，在打印设计里面把代码输出，黏贴到html页面如下 LODOP.ADD_PRINT_TEXT(211,489,81,20,"输出内容...1"); 然后换成动态的输出内容 LODOP.ADD_PRINT_TEXT(211,489,81,20,document.getElementById("price").innerHTML); 然后把打印设计改成打印预览...LODOP.PREVIEW();也可以把页面微调的权限授权给客户，由于每台打印机不一样，客户可以自己微调页面的位置LODOP.PRINT_SETUP(); (adsbygoogle = window.adsbygoogle

1.7K2 0

终端输出 Table？不要再用 console.table 了！这个 Node.js 库值得尝试下~

近期发现了一个有意思的 NPM 库 voici.js 在输出到终端时可以将数据做一些格式化，当一组数据特别大时，使用该库的效果会更加的理想。...voici.js 是用 TypeScript 编写的一个 Node.js 库，相比于 Node.js 原生的 console.table()，它提供的功能会更多些。...import { Table } from 'voici.js' const data = [ { firstname: 'Homer', lastname: 'Simpson', age: 39....txt 格式的文件 import { Table } from 'voici.js' const data = [ { firstname: 'Marge', lastname: 'Simpson.../larswaechter/voici.js - END -

3721 0

html5设置table样式_原生js添加样式

table样式设置表格： ._table{width: 100%; border-collapse: collapse; border:0px;} 设置表头： ...._table thead tr {font-size: 13px; color: #2e3b45; text-align: center; background-color: rgba(230, 255..._table td{line-height: 20px; text-align: center; padding: 4px 10px 3px 10px; height: 18px;border: 0px..._table tbody tr {background: #fff; font-size: 13px; color: #393939;} ...._table tbody tr:nth-child(2n){ background: #f3f3f3;} 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

14.6K2 0

bootstrap模态框中含有echart图表的打印

首先模态框的弹出用js方法实现 $('#myModa1').modal('show');然后使用定时器setTimeout（function(){初始化echart图}）完整的代码（采用lodop...}); }); var LODOP...document.getElementById("linechart1").style.display = "none"; CreateOneFormPage(); LODOP.PREVIEW...(); }; function CreateOneFormPage() { LODOP = getLodop(); LODOP.PRINT_INIT(...strFormHtml = strBodyStyle + "" + document.getElementById("printArea").innerHTML + ""; LODOP.ADD_PRINT_HTM

1.6K2 0

原生JS加localStorage实现数据持久化的ToDoList

预览代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...

3.3K2 0

Jquery基础(三) js方法转换金额加逗号显示

今天在项目遇到后台返回一个属性,如:Long loan_money = 123456789L,页面中显示金额又不能从后台转化后返回给前台; 这时候就需要在页面中添加js方法对金额数字进行转化了,js方法如下...: 转化规则:对输入参数number金额的数字,每隔3位加一逗号隔开显示.n表示显示精度,但只能是0值举例如下: var show_money1 = parseFormatNum("123456",...//数字加逗号 function parseFormatNum(number,n){ if(n != 0 ){ n = (n > 0 && n <= 20) ?

4.6K3 0

jnpf开发文档_java开发最新技术

前后端分离已成为互联网项目开发的业界标准使用方式，通过 nginx+tomcat 等方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、...主要技术栈前端 JS框架：jquery, bootstrap, vue UI框架:bootstrap、ElementUI 富文本编辑：UEditor 文件上传：webuploader 客户端验证：jquery-validate...IO，webSocket 图标组件：echarts、highcharts 打印组件:lodop、h5打印 APP JS框架:uniapp, h5, vue APP UI框架:uniapp 后端核心框架

1.7K2 0

如何用JS写一个table组件 | 作业讲解

第二种，从JavaScript的模块化开发角度来讲，一个function就是一个模块，例如： function isGet(){ //get... } 这个函数就是一个JS模块，它是有逻辑的。...一个组件可以说它是一个JS模块，但一个JS模块，却未必是一个组件。...所以你会看到一个组件里面包含了许多函数、方法或是许多JS文件。这就引出下一个问题，组件的组织。也就是单一功能的再细分，用笔先写出一个个的点。。...就说这个 table组件吧， --自定义行； --自定义列； --自定义左侧是否有单选按钮； --自定义右侧是否有删除按钮； --自定义每行是否可展开下拉； --自定义每列标题是否有下拉按钮； --自定义表头标题...createTableUI(config) 然后createTableUI的伪代码： createTableUI(c){ var config = $.extend(true,{},c); var tab = $('table

4.5K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭