Vue-Element-admin 框架上使用 Hiprint 打印插件 三、预览正常，打印样式错乱

最新推荐文章于 2023-12-22 11:30:42 发布
最新推荐文章于 2023-12-22 11:30:42 发布
阅读量2.9k 收藏 8
点赞数 9
分类专栏： vue-element-admin print
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z123191456/article/details/113877231
版权

在添加模板设计界面的时候，出现了设计没问题，预览也没问题，但是就是打印的时候样式不正确，表格没有边框也不换页数据都堆积到了一起，经过了在群里的咨询，百度的查找，最后找到了问题。

具体原因是，在打印的时候浏览器调用打印功能未获取到piing.css,pring-lock.css的样子文件
在这里插入图片描述
就是这里在打印的时候，如果样式不正确，这里会不显示文件。但是我在程序界面里看了，确实是引用了在这里插入图片描述
那么为什么会这样呢，最后我发现是vue-element-admin的问题。单页面引用的不影响整个框架 ，而浏览器调用打印的时候使用的是框架引用的CSS
最后我的解决方法是将文件复制到了public项目下
在这里插入图片描述
并在Index.html目录下进行引用，就解决了此问题
在这里插入图片描述

吹口哨的兔子
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【开源打印组件】vue-plugin-hiprint初体验
老司机的后备箱
09-22 5712
本文介绍对vue-plugin-hiprint部分重要代码的解析，这是一个很好的开源插件，能够自己自定义打印模板，通过后端传来的数据进行渲染打印，官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。分别是：拖拽组件、画布、属性栏封装js中，使用addPrintElementTypes方法添加自定义的组件，可以查看print.io官方文档来配置参数。通过控制台输入window.HIPRINT_CONFIG可以查看配置参数名。
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
06-01
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑。
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
热门推荐
半只
03-07 1万+
/ 这样后续直接调用 hiprintTemplate.print({ 'canshu1': topText, 'canshu2': code }) 就可以打印了, 我这里是 方便容易阅读 就放在了方法里面。// 预览打印， 注意数据对象 { 'canshu1': topText, 'canshu2': code } 对象属性名称名称要和上面设置的一样。// 获取打印机列表, 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！// import引入的组件需要注入到对象中才能使用。
若依vue打印的简单方法
子豪的博客
08-24 4617
像我们后端程序员做前端的话,有时候真不需要知道什么原理,直接塞就好了 目的是为了实现点击某些行的数据,然后点击某个按钮直接弹出下面的打印 此链接 大佬是原创,我拿来总结梳理一下 插件进阶功能请移步: 链接 插件模板制作页面: 链接 然后找到项目中的依赖文件夹node_modules/vue-plugin-hiprint/dist/中的print-lock.css文件,复制一份到自己项目的静态资源目录public下 将下面的代码复制到自己项目中 注意这个字段名要匹配,就ok 了
vue3简单使用打印插件vue-plugin-hiprint
woflyoycm的博客
01-17 4322
打印 vue3 vue-plugin-hiprint
Vue-Element-admin 框架上使用 Hiprint 打印插件 一、项目介绍
吹口哨的兔子
02-04 5591
#因自己做的项目，需要自定义报表的功能，所以在网上找了一些打印插件， 最后发现[Hiprint](http://hiprint.io/)的资料挺全的，就试着用了一下， 发现还挺好用的，现在是实际开发后的效果
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue-element-admin中文版本
07-20
9. **国际化(i18n)**：Vue-element-admin 可能集成了 i18n 国际化插件，支持多语言切换，满足全球化需求。 10. **PWA 支持**：Progressive Web App，通过 Service Worker 和 Manifest 文件，使网页具备离线缓存、...
vue-element-Admin-demo:vue-element-Admin框架源代码
03-23
当前版本是在vue-cli上构建的v4.0+ 。 如果发现问题，请输入。 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 该项目不支持低版本的浏览器（例如IE）。 请自行添加polyfill。 准备 您
vue-element-admin 完整包（包含node_modules）
04-14
很多时候在安装这个vue-element-amdin的时候都会出现各种各样的报错，所以在一次成功之后就不想再折腾这个安装包了。
vue-hiprint-example:基于Vue Element-UI的hiprint项目
05-11
Vue Hiprint示例项目 基于Vue Element-UI的hiprint项目 屏幕截图 入门 该项目是vue指纹的起点。 步骤1 > git clone https://github.com/peakcool/vue-hiprint-example.git 第2步 > cd YOUR_PROJECT/vue-hiprint-example 第三步 > npm install 或者 > yarn 第四步 > npm run dev 资源 一些帮助您入门的资源：
HiPrint Demo
09-15
hiprint 是一个web 打印的js组件，无需安装软件。支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
在实际开发中，通过阅读`vue-element-admin`源码，可以深入理解这些技术的实践应用，同时，不断探索和学习新的前端技术和最佳实践，提升自己的开发能力。在项目中遇到问题时，可以查阅官方文档或社区资源，如GitHub...
vue-plugin-hiprint使用教程【1】
一名业余前端的博客
12-22 1197
vue3中使用vue-plugin-hiprint的基本教程
vue-plugin-hiprint简单使用打印html
zhangzuruiqqq的博客
05-11 2680
本文实现了无预览 指定打印机直接打印html，附带一个快递单模板
记一次打印插件踩坑事件
tzz_1122的博客
10-25 119
2 非ie，使用插件；插件不兼容ie，但是项目上需要兼容 ie。但是在打包之后在线上环境，还是会报错。1判断当前浏览器是否ie。使用import方式。
【hiprint】hiprint的使用方法（附使用案例）hiprint 表格数据传输问题解决办法
m0_67392273的博客
03-06 2604
hiprint打印table数据无法绑定解决办法 事件起因： 问题描述： hiprint使用教学： hiprint案例(附下载地址)： hiprint的依赖导入 案例代码解释： 事件起因： 因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训 问题描述： 我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印 整个项目的结构： 我因为写的一个简单的数据
vue-element-admin前端框架搭建
最新发布
06-29
Vue-element-admin是一个基于Vue.js和Element UI的后台管理框架，它提供了丰富的预设组件和功能，能够帮助开发者快速构建美观且高效的后台管理系统。下面是Vue-element-admin搭建的基本步骤： 1. **安装依赖**： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值