vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.use(Print); 页面中使用,给需要打印的容器加一个id,打印按钮传入这个id html: <div id="printMe" style="background:r

# vue打印功能 console.log(data.doPrint); // html字符串 let newContent =data.doPrint; let oldContent = document.body.innerHTML; document.body.innerHTML = newContent; window.print(); window.location.reload(); document.body.innerHTML = oldContent; #调用之后,会弹出打印页

1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

vue 方法 第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入  import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>锄禾日当午</ <p>汗滴禾下土 </ <p>谁知盘中餐</p>

1.https://github.com/xyl66/vuePlugs_printjs从这个路径下载print.js.放到你的代码中 2.我是放到我本地一个js文件中. 3.引入当前文件 //打印插件 import Print from './utils/print' Vue.use(Print) // 注册 4.页面应用 <template> <section ref="print" style="max-height: 1000px;width: 800

printContent (e) { let subOutputRankPrint = document.getElementById('subOutputRank-print') console.log(subOutputRankPrint.innerHTML) let newContent = subOutputRankPrint.innerHTML let oldContent = document.body.innerHTML document.body.innerHTML = newC

//打印触发的方法 print(e){ let subOutputRankPrin = document.getElementById('printcode'); var options = { format:"CODE128",displayValue:true,fontSize:18,height:100 }; if(this.selectData.length==0) { alert("亲,请记得选择打印内容0.0!"); } else { for(var i

需求有几种情况: 1.直接在HTML写页面,将页面上的东西用A4纸打印出来: 2.后台传回PDF文件,前台浏览器预览并打印: 3.后台做好要打印的,传回图片,如base64编码,前台浏览器 预览并打印: 这几种实现方式可能有些不一样. demo 后续再整理~~~

https://www.jb51.net/article/147040.htm https://www.jianshu.com/p/dd120b65446a  //转pdf

最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可以选择的,并且多看几篇帖子,总算把这两个打印方法,都试了一遍. 下面简单总结一下: 先说结论:请使用第二种方法,下载print.js到本地,然后放到项目中导入.原因后边说. 一.使用vue-print-nb方法 具体的使用这里就不详细说明了,因为网上真的太多太多了.千篇一律的. 在本地直接npm安装

一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架. 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念. 那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前

使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余这里是通过require.context的一种便捷操作 实例 文件结构 component/modal里存放的是我们定义的公共DOM组件 // 导入Vue, 需要使用Vue.component()方法注册组件 import Vue from 'vue' // let f = r

Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿.解决方案:在组件生命周期beforeDestroy停止setIntervalbeforeDestory() {clearInterval(this.timer);MessageBox.close() } 使用vue过程中

目录 一.项目目录(vue-cli2) 二.开发实践 (一) 权限 (二) 各组件间传递数据 (四) 路由 (七) 组织部门业务员三级联动 (八) 优化性能,手动绑定下拉框数据 (九) 验证 (十) 打印 (十一) 签名 三.代码规范 (一) JS规范 (二) Vue规范 (三) 命名规范 (四)文本编辑器规范 四.优化内容 太极ERP前端开发总结 一.项目目录(vue-cli2) ├── build ├── config ├── dist //打包后生成的静态页面文件 ├── src │ ├─

菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解决办法 模块打包原理简析 1.CommonJS 之 exports和require用法 CommoneJS规定每个文件是一个模块.将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全

基于vue单页面应用.暂且没找到合适的方案,什么vue-print  .jquery.print.js.jqprint.js..canvas生成图片啊 大多不能保证页面样式保持原样. 所以,选择了最土的办法. 走起 window.print() 嗯,各种问题又来了了了了了.直接调用window.print()会把整个页面都给打印. 所以, 依据业务重写媒体查询css.(无法保证以后还要改) @meida print 专门定义控制打印显示样式,跟打印机相关的都写在它底下 由于现在只进行弹窗内容区域

第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print);  //注册 3,现在就可以使用了 <div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <b

1.安装打印相关依赖 cnpm install vue-print-nb --save 2.安装后,在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3.在页面中直接进行调用 <template> <div> <div id="printTest" style="width: 100%;text-align:center"> <p styl

1.安装 npm install vue-print-nb --save 2.在mian.js中引入 import Print from 'vue-print-nb' Vue.use(Print); 3.在页面中使用 <el-dialog title="打印页面" :visible.sync="dialogVisible" width="40%" :loading="loading" size='small' @open

通过npm 安装插件 1.安装  npm install vue-print-nb --save 2.引入  安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print);  //注册 3. <div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <button v-print=