简介: Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe 目录 需求描述 方案1:直接打印页面 方案2:使用css媒体查询控制打印内容 方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe(推荐) 需求描述 最近有一个需求,是让用户通过浏览器可以...
1、安装print.js库,2、在Vue组件中引入print.js,3、创建打印功能。下面将详细描述这些步骤以及相关的背景信息和示例代码。 一、安装print.js库 首先,你需要在项目中安装print.js库。可以使用npm或yarn来完成这个任务。以下是安装print.js的命令: npm install print-js 或者 yarn add print-js 二、在Vue组件中引...
方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe(推荐) 需求描述 最近有一个需求,是让用户通过浏览器可以打印表格内容 环境: node v16.14.0 vue2.js element-ui 表格本身是使用了的el-table实现的,浏览器显示的时候...
记账凭证 业务日期:{{ items.singTime }} 序号: 日期:{{ items.singTime }} 附件数:{{ items.attCount}} {{items.year}}年第{{items.period}}期 凭证号:{{ items.voucherGroup }}-{{ items.nos }}
最近开发的页面统计报表部分突然说要有打印功能,那就只能加一个了,做的也比较简单,由于是使用vue开发的项目,需要打印统计页面局部表格内容,使用printjs非常方便就实现了,以下是相关简单的记录演示说明。 第1步:安装printjs vue项目直接执行以下指令安装printjs插件 n
一、vue安装命令: npm install print-js –save 二、引入 这个引入不需要在main.js中,直接在使用的.vue中引入即可 这里颜色虽然是灰色,但是也要添加,否则会报错。 三、编码 我这里要打印 html 中的div ,调用函数找到 div 的 id。 methods: { goPrint(){ ...
1.用到print.js 自行安装 安装完成后 引用 import printJS from 'print-js'; 2.用到深拷贝 深拷贝代码:(可以将此代码放在一个页面中,对此进行引用即可,例如:放在until文件中,引用代码 import { deepClone } from '@/utils/index') export function deepClone(source) { ...
一、使用vue-print-nb方法 具体的使用这里就不详细说明了,因为网上真的太多太多了。千篇一律的。 在本地直接npm安装一下就好。按照步骤一点一点来。 然后在自己项目的配置文件里import进来就可以了。 使用就更简单了。选好区域直接调用即可。 打印效果超出预期的好。感谢这个插件的作者!
Vue Print-js 打印问题记录~ 解决思路 1、看是否样式问题 在查看Print.js 文档后发现,TA可以自己设置样式。然后我就以为是没有设置打印样式问题而导致的。 代码语言:javascript 代码运行次数:0 Print({printable:'print-box',type:'html',documentTitle:'文档标题',header:'统计图',headerStyle:'font-weight:400...
在Vue中使用print打印图片的步骤非常简单:1、引入图片资源并在模板中显示;2、使用window.print()方法触发打印功能。通过这两个步骤,你可以在Vue应用中实现图片的打印功能。接下来,我们将详细描述如何实现这一功能。 一、引入图片资源并在模板中显示 首先,你需要确保要打印的图片资源已经被正确引入并显示在Vue组件中。