vue 打印
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>
<p>粒粒皆辛苦</p>
</div>
<button v-print="'#printTest'">打印</button>
如果内容打印不全,在打印操作时点击更多设置,然后设置缩放
验证:vue-print-nb 使用某些浏览器点击没效果(不知道什么原因)
第二种方法:手动下载插件到本地
插件地址:https://github.com/xyl66/vuePlugs_printjs
import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print">
打印内容
<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用
注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
指定不打印区域
方法1. 添加no-print样式类
<div class="no-print">不要打印我</div>
方法2. 自定义类名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
未试验: print.js 、vue-easy-print
jquery 方法
jquery-print.js
1、index.html 引入
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jQuery.print/1.5.0/jQuery.print.min.js"></script>
2、webpack.base.conf.js
externals: {
"vue": "Vue",
"element-ui": "ELEMENT",
'jquery':'window.jQuery'
注:需要全局话jQuery。
3、使用
$("#printObject").print();
jquery.jqprint.js
使用方法同上。
javascript 方法
页面打印
function printPage(){// 此处函数名不能为print,因为会与window.print()形成无限递归
window.print();
}
区域打印
准备工作:用:<!- -startprint- ->和<!- -endprint- ->“圈”住要打印的代码段
function printArea(){
var bdHtml=window.document.body.innerHTML;
var sprnstr="<!--startprint-->";
var eprnstr="<!--endprint-->";
var prnHtml=bdHtml.substring(bdHtml.indexOf(sprnstr)+17);/*去掉前面的部分*/
prnHtml=prnHtml.substring(0, prnHtml.indexOf(eprnstr));/*去掉后面的部分*/
var myWindow=window.open('', '', '');/*打开新的浏览器窗口(选项卡)*/
myWindow.document.body.innerHTML=prnHtml;
myWindow.print();
}
注意:CSS的@media print{} 控制打印时的样式、或者写在元素上
vue 打印的更多相关文章
- vue打印html
# vue打印功能 console.log(data.doPrint); // html字符串 let newContent =data.doPrint; let oldContent = docum ...
- vue 打印页面部分区域
1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容
- vue 打印html
1.https://github.com/xyl66/vuePlugs_printjs从这个路径下载print.js.放到你的代码中 2.我是放到我本地一个js文件中. 3.引入当前文件 //打印插件 ...
- vue 打印功能
printContent (e) { let subOutputRankPrint = document.getElementById('subOutputRank-print') console.l ...
- VUE—打印(原生态网页打印)
//打印触发的方法 print(e){ let subOutputRankPrin = document.getElementById('printcode'); var options = { fo ...
- Vue 打印预览功能
需求有几种情况: 1.直接在HTML写页面,将页面上的东西用A4纸打印出来: 2.后台传回PDF文件,前台浏览器预览并打印: 3.后台做好要打印的,传回图片,如base64编码,前台浏览器 预览并打印 ...
- vue 打印 页面特定部分转pdf
https://www.jb51.net/article/147040.htm https://www.jianshu.com/p/dd120b65446a //转pdf
- 使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题
最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可 ...
- 深入理解vue
一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...
随机推荐
- bootstrap小图标引用方法
<span class="glyphicon glyphicon-search"></span> <span class="glyphico ...
- jenkins持续集成之Global Tool Configuration的配置
Global Tool Configuration的配置过程: 1.点击系统管理2.点击 Global Tool Configuration3.必须配置: jdk git ant maven 1.点击 ...
- ThinkPhp数据缓存技术
1.缓存初始化 在 ThinkPHP 中,有一个专门处理缓存的类:Cache.class.php(在Thinkphp/Library/Think/cache.class.php,其他的各种缓存类也在这 ...
- opencv常用函数备忘
//显示图片 IplImage * src = cvLoadImage("xx.JPG"); cvNamedWindow(); cvShowImage("show_ima ...
- eclipse使用配置
eclipse设置工作空间为UTF-8(适应中文,避免乱码) windows---preference---general---workspace,修改textfile encoding eclips ...
- 12、Semantic-UI之输入框
12.1 基础输入框 在Semantic-UI中可以定义多个样式的输入框,可以将图片与输入框结合,输入提示信息文字,设置输入框的状态. 示例:定义基础输入框 用户名: <div class= ...
- JavaScript的词法作用域问题
多年以前,当我怀揣着前端工程师的梦想时,曾经认真阅读过<JavaScript高级程序设计(第2版)>.里面有一个问题(P147),让我一直百思不得其解. function createFu ...
- MongoDB整理笔记のReplica Sets + Sharding
MongoDB Auto-Sharding 解决了海量存储和动态扩容的问题,但离实际生产环境所需的高可靠.高可用还有些距离,所以有了"Replica Sets + Sharding" ...
- log4net 入门使用
log4net 是dotnet平台下的一个日记记录组件. 一 NuGet中安装log4net包: 二 配置log4net.config文件 配置文件内容: <?xml version=&quo ...
- MVC4 Action 两种异步方式
1. xxxAsync/xxxCompleted 组合方式异步,xxxCompleted 就是他的回调函数,在执行完 xxxAsync 后调用xxxCompleted . 使用 异步方式必须继承A ...