Vue.js ：使用LODOP打印表格文件

用到的打印工具是LODOP。

项目环境是vue-cli搭建的，组件库是ant design vue。

1、在需要打印的页面引入插件。

<script>import { getLodop } from '@/utils/LodopFuncs'
</script>

2、绘制要打印的表格内容

此处不要用组件库的<a-table>去写，用原生的<table> <caption> <tr> <th> <td>等标签去写。

举个栗子：

<table border="1" id=”box“><caption>Monthly savings</caption><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr>
</table>

？
：写的时候遇到了一个问题，<caption>标签写完后显示在<table>下方，而不是上方，因为antd的样式覆盖了，所以需要修改一下。

<caption style="caption-side: top;">table标题</caption>

3、打印事件

LODOP有专门打印表格的方法。文档地址

使用打印HTML内容的方法：ADD_PRINT_TABLE(intTop,intLeft,intWidth,intheight,strHTML);用超文本打印

举个栗子：

exportTable(){const LODOP = getLodop()LODOP.PRINT_INIT('打印table表格')LODOP.ADD_PRINT_TABLE(20, 0, '80%', '100%', document.getElementById('box').innerHTML)LODOP.PREVIEW()
}

以上，就可以打印表格内容啦。

LODOP.PREVIEW()这个方法可以预览打印效果，选择打印机，方便调试。

Vue.js ：使用LODOP打印表格文件相关推荐

js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
vue php 文件上传,使用vue.js和laravel上传文件
我尝试在vue.js和laravel中上传pdf文件,files_array是这样定义的:data(){ return { formData: new Form ({ files_array:'', ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...
使用Vue.js搭建简单的表格页面
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>我 ...
vue+elementui+lodop打印表格
非单页结构,是在mvc视图中引用vue和elementui来使用的,打印el-table表格内容时,可能是因为样式的原因,打印的格式很难调整,在界面中增加一个隐藏的div,里面放个table,获取数据 ...
vue项目使用LODOP打印小票功能
毕业后第一份工作是做后台管理系统的,项目中要求有打印小票功能,然而我并不知道,该怎么写,百度了很多.一开始在网上查到很多都在用electron+vue我以为我可以用这个呢,搞了两天,才发现这是做桌面软 ...
vue下使用lodop打印图片
最近项目需要使用web打印机,寻找了一下,发现好多人都在使用lodop这个插件,于是,决定使用这个插件进行图片打印. 1.百度lodop,可以轻松找到这个插件的官网,可以看到许多完整的资料,比如,在线 ...
Lodop打印表格包含页眉和页码
// 定义的样式字符串 let styleClass=`<style> tr, td { padding: 0px; margin: 0px; text-align: center; wo ...
Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考
此文章用于记录经验,方便下次借鉴,为节省时间用于举例的UI也许有点简陋,将就将就-重要的是方法. 1.导出json文件 1.1.安装file-saver 使用cnpm install file-sav ...

Vue.js ：使用LODOP打印表格文件

1、在需要打印的页面引入插件。

2、绘制要打印的表格内容

3、打印事件

Vue.js ：使用LODOP打印表格文件相关推荐

最新文章

热门文章