vue 3 打印 print-js
1、安装
npm install print-js --save
2、引用
import print from 'print-js'
3、编写打印函数
const enterDialog = async () => {
const style = '@page {margin:0mm 10mm};'//打印时去掉眉页眉尾
printJS({
printable: 'print',// 标签元素id
type: 'html',
header: '',
targetStyles: ['*'],
style
});
}
4、调用函数
<table id="print"></table>
<div class="dialog-footer" style="text-align: center; position: absolute;top: 80px;right: 20px;">
<el-button size="large" @click="enterDialog" style="margin: 5px;">打 印</el-button><br>
<el-button size="large" @click="closeDialog" style="margin: 5px;">取 消</el-button>
</div>
打印最好使用原生table标签,不然可能会出现很大的样式问题
vue 3 打印 print-js的更多相关文章
- vue 中使用print.js 打印遇到的问题 ?
不管怎么设置打印部分的 margin和height 仍会在预览时多出一张空白页?求各位大佬遇到过的请留言谢谢!
- 打印-print.js
//打印开始// strPrintName 打印任务名// printDatagrid 要打印的datagridfunction CreateFormPage(ctx,strPrintName, pr ...
- 使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题
最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可 ...
- 前端网页打印插件print.js(可导出pdf)
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
- vue实现打印功能的两种方法
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'v ...
- Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验
安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号
解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...
- print.js继承原有样式
npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...
随机推荐
- Vue 项目中实现的微信、微博、QQ空间分享功能(亲测有效)
需求:文章添加分享功能(包括微信.微博.QQ空间) 如下图所示: 点击图标分别跳转到如下界面:(实现效果如下) 话不多说直接代码(可以封装成组件) <template> <div c ...
- 【c#】csharp_learn
csharp learn JSON C#解析JSON字符串总结 https://www.cnblogs.com/nc923/p/11418583.html c#解析json字符串处理(最清晰易懂的方法 ...
- 人眼对led灯的闪烁识别度:写单片机的时候,小于15ms,我们人眼视为常亮
人眼对于每11毫秒闪烁一次约83赫兹基本感觉不到,每15毫秒闪烁一次约66赫兹轻微频闪. 所以写单片机的时候,小于15ms,我们人眼视为常亮
- 面试:关于Zookeeper注册节点的上线和掉线
Zookeeper中有一个重要的部件Monitor(监控中心),它是Dubbo中服务治理体系中的重要一环. 监控中心在启动的时候,会通过Zookeeper的/dubbo/com.foo.BarServ ...
- 记maven打包加入外部jar后tomcat运行失败问题
环境:maven 3.8.0 .tomcat 8.5.30 因为项目需要额外的引用外部jar,需要打包到war中. 所以在pom中加入了 <webResources> <resour ...
- 「postOI」Cross Swapping
题意 给出一个 \(n\times n\) 的矩阵 \(A\),你可以进行下述操作任意多次:指定整数 \(k\)(\(1\le k\le n\)),使 \(A_{ni}\) 与 \(A_{in}\) ...
- CSS的拾遗(1)
CSS的拾遗(1) 1.padding: (1)定义:在一个声明中设置所有内边距属性 (2)用法: 例子 1:上,右,下,左 padding:10px 5px 15px 20px; 上内边距是 10p ...
- 快速上手SpringBoot
快速上手SpringBoot SpringBoot是用来简化Spring应用的初始化搭建以及开发过程 三个不需要,这是springboot使用mvc区别于其它框架的特点 tomcatd的端口 下一行是 ...
- andriod升级保错问题归类
https://developer.aliyun.com/article/1116339 https://www.jianshu.com/p/5d9c790ab958 https://blog.51c ...
- 我们后端代码这样子设置虽然这样子返回的是字符串,但是json字符串也是字符串
我们后端代码这样子设置虽然这样子返回的是字符串 但是json字符串也是字符串,后端如果想接收的话,直接百度下怎么接收json字符串就行