简介: 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组件中引...
记账凭证 业务日期:{{ items.singTime }} 序号: 日期:{{ items.singTime }} 附件数:{{ items.attCount}} {{items.year}}年第{{items.period}}期 凭证号:{{ items.voucherGroup }}-{{ items.nos }}
yarn add print-js 2. 在Vue组件中导入print-js库 你可以在需要使用print-js功能的Vue组件中局部导入该库,也可以在main.js或main.ts中全局导入。以下是两种方式的示例: 局部导入 在单个Vue组件中导入print-js: vue <template> <div> <button @click="printContent">打印内容</bu...
vue项目直接执行以下指令安装printjs插件 npm install print-js --save 第2步:导入printjs 接下来在main.js导入printjs,直接新增如下内容: import print from 'print-js' 第3步:使用printjs 在你需要打印的vue组件页面,比如我想打印一个表格,则在表格外部新增打印内容的div,给个id,然后新增个打印按钮,触发打印事...
打印json时可以添加表头。打印html页时可以继承原有页面的样式,局部打印,过滤掉要打印的元素,及其方便。 一、vue安装命令: npm install print-js –save 二、引入 这个引入不需要在main.js中,直接在使用的.vue中引入即可 这里颜色虽然是灰色,但是也要添加,否则会报错。
MyPlugin.install = function (Vue, options) { // 4. 添加实例方法 Vue.prototype.$print = Print } export default MyPlugin 2.main.js 注册模块 1 2 3 // 导入打印组件 import Print from './plugins/print/Print' Vue.use(Print) 3.新建print.vue组件 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
第二步,我们需要在Vue.js应用程序中引入Print.js。你可以通过npm安装Print.js,并在需要使用打印功能的组件中引入它。假设你的项目已经使用了Vue CLI构建,下面是一些具体的步骤: 1.打开终端,进入项目目录,并使用以下命令安装Print.js: npm install print-js 2.在需要使用打印功能的组件中,导入Print.js: javascript...
Vue Print-js 打印问题记录~ 解决思路 1、看是否样式问题 在查看Print.js 文档后发现,TA可以自己设置样式。然后我就以为是没有设置打印样式问题而导致的。 代码语言:javascript 代码运行次数:0 Print({printable:'print-box',type:'html',documentTitle:'文档标题',header:'统计图',headerStyle:'font-weight:400...
printjs在vue用法 在Vue中使用print.js库可以方便地实现打印功能。下面是详细的使用步骤: 1. 首先,安装print.js库。可以使用npm或yarn命令进行安装: bash npm install print-js 或 bash yarn add print-js 2. 在Vue组件中引入print.js库。可以在需要使用打印功能的组件中引入: javascript import printJS from ...