vue + html + Lodop打印功能

这篇具有很好参考价值的文章主要介绍了vue + html + Lodop打印功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.官网下载 http://www.lodop.net/download.html
vue + html + Lodop打印功能,vue.js,html,java
2.解压安装运行
点击CLodop_Setup_for_Win32NT.exe进行安装
vue + html + Lodop打印功能,vue.js,html,java
3.vue代码实现(具体操作见官网:http://www.lodop.net/faq/pp35.html)
3.1把官方提供的LodopFuncs.js文件保存到项目某个目录下
vue + html + Lodop打印功能,vue.js,html,java
3.2 修改LodopFuncs.js文件, 在文件最底部添加一行代码
export { getLodop }; //导出getLodop
把该文件中的getLodop函数 export 出来

4.vue 前端代码
引入打印的js文件
import { getLodop } from ‘@/views/components/qz-lodop-funcs/LodopFuncs’

5.编写html页面

5.1 打印按钮
<el-button @click=“btnClickPrint” size=“small” type=“primary”>打印

5.2 html列表页面
dataList为Java后端接口查询的列表数据

< div ref=“problemContent”>
< table v-show=“tableShow”>
< tr>
< th>序号< /th>
< th>扫描人< /th>
< th>问题数量< /th>
< th>扫描页数< /th>
< th>错误率< /th>
< /tr>
< tr v-for=“(chapter,index) in dataList”>
< td>{{index + 1}}< /td>
< td>{{dataList[index] == null ? “” : dataList[index].scannedName}}< /td>
< td>{{dataList[index] == null ? “” : dataList[index].problemNumber}}< /td>
< td>{{dataList[index] == null ? “” : dataList[index].scanPageNumber}}< /td>
< td>{{dataList[index] == null ? “” : dataList[index].errorRate}}< /td>
< /tr>
< /table>
< /div>

5.3 定义data数据
data () {
return {
htmlCode: ‘’,
tableShow: false,
}
}

5.4 打印方法
btnClickPrint () {
//1. 获取vue中html页面(vue页面编写style不要有scoped,会使html元素中携带data-v-123a743a,造成页面不显示。获取页面全部数据: this.$el.outerHTML )

this.htmlCode = this.$refs.problemContent.innerHTML
console.log(this.htmlCode)

// 因为html设置了v-show,获取html页面会携带style=“display: none;”
this.htmlCode = this.htmlCode.replace(‘style=“display: none;”’,‘’).replace(’ ‘,’')

//2. 参数(this.htmlCode) = 页面样式 + html页面代码
var strBodyStyle = “”

this.htmlCode = strBodyStyle + this.htmlCode

//3. 调用getLodop获取LODOP对象
let LODOP = getLodop()

//4. 初始化
LODOP.PRINT_INIT(“”)

//5. 参数设置(距上部高度 左边距 宽度 高度 html页面)
LODOP.ADD_PRINT_HTM(“5%”,“5%”,“100%”,“90%”,this.htmlCode)

//6. 打印 (输出pdf文件,底部含有LODOP打印标识:LODOP.PRINT())
LODOP.PREVIEW()

}文章来源地址https://www.toymoban.com/news/detail-720048.html

到了这里,关于vue + html + Lodop打印功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(66)
  • vue 打印html <iframe>标签(内容打印)超详细

    今天领导给了个需求,需要配合其他项目组给一个公共组件的npm进行,公共组件打印,打印操作由这个npm包来操作。(经过开会商讨,最后决定配置一个path路径,来展示页面,然后我负责在公共这里打印相应页面内容。)在这之初都是好着的,首先进行配置,这里只需要一个

    2024年02月15日
    浏览(56)
  • Print.js实现打印pdf,HTML,图片(可设置样式可分页)

    目录 一.安装及引入Print.js 二.介绍 三.常用配置 四.具体使用 一.安装及引入Print.js 1.安装 2.在需要使用的文件引入 二.介绍 Print.js有四种打印类型:\\\'pdf\\\'、\\\'html\\\'、\\\'image\\\'、\\\'json\\\'。 它的基本用法是调用printJS()并传入参数 三.常用配置 Print.js接受一个对象作为参数,在这里你可以配置

    2024年02月06日
    浏览(46)
  • 功能:vue:浏览器打印小票、打印参数配置

    1、要实现点击 打印小票 按钮,弹出预览弹框,点击弹框里面的 打印 ,则实现浏览器打印预览,以及浏览器打印。 2、根据对应需求可以做步骤的加减,本例多了一个本地预览。 3、环境:pc端打印、chrome浏览器、爱普生TM-T81热敏打印机、打印小票宽度79.5±0.5(mm)。 代码演示:

    2024年02月03日
    浏览(60)
  • 【vue】实现打印功能

    一、vue-print-nb 官网地址:https://github.com/Power-kxLee/vue3-print-nb 【1】安装 【2】引用 vue2 引用 vue3 引用 【3】API 属性 类型 默认值 必要 可选值 描述 id String - 是 - 范围打印 ID(如果设置url则可以不设置id) url String - 否 - 打印指定的 URL。(不允许同时设置ID popTitle String - 否 - 默认

    2023年04月08日
    浏览(36)
  • vue 实现打印功能

    浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。 调用 window.print() 会对整个 document.body 进行打印,而我们通常只需要打印一部分页面,可以使用打印插件 vue-print-nb vue

    2024年02月09日
    浏览(36)
  • vue实现打印功能

    在Vue应用中调用打印机功能,可以使用 JavaScript 的 window.print() 方法。这个方法会打开打印对话框,然后让我们选择打印设置并打印文档,但是尼这种方法依赖于浏览器的打印功能。 以下是一个简单的示例,演示如何在Vue组件中调用打印功能: 在Vue组件中,将需要打印的内容

    2024年02月12日
    浏览(37)
  • vue笔记——实现打印功能1

    第一步:安装vue-print-nb,打开项目终端输入 npm install vue-print-nb --save 第二步:打开package.json文件,在dependencies中出现vue-print-nb,说明安装成功,如下图所示。  第三步: 方法一:全局导入 在main.js文件输入以下代码: // 导入vue-print-nb import Print from \\\'vue-print-nb\\\' Vue.use(Print) 第四步

    2024年02月07日
    浏览(32)
  • vue3问题:如何实现打印功能?

      编辑排版  | 宋大狮 平台运营  | 小唐狮 ONE 问题描述 2023年4月22号记,久违了大家。 今天要和大家分享的是关于如何实现表单、表格等自定义内容的打印功能。 最近在后台项目中,有遇到打印详情页的需求,因为开发中此功能用的次数不多,所以放在此处仅做一下记录

    2024年02月09日
    浏览(43)
  • vue-print 实现打印功能

    一、安装 1. Vue2 2. Vue3 二、基本使用 1. 直接打印页面HTML 1)方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print=\\\"\\\'#id名\\\'\\\" 2)代码(以表格为例) 2. 个性化设置 1)方法 打印按钮的 v-print 绑定一个对象 2)代码 3)效果展示 ① 预览工具 3. 打印URL 1)方法 ① 给 打印

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包