311 lines
8.7 KiB
Vue
311 lines
8.7 KiB
Vue
<template>
|
||
<div id="app">
|
||
<div id="loading"></div>
|
||
|
||
<h3 style="text-align: left;margin-left: 30px;">支持的打印方式:</h3>
|
||
<el-divider><i class="el-icon-printer"></i></el-divider>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-button type="primary"
|
||
icon="el-icon-printer"
|
||
v-print>全局打印</el-button>
|
||
<el-card class="box-card">
|
||
对当前页面全部进行打印
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider><i class="el-icon-printer"></i></el-divider>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-button type="primary"
|
||
icon="el-icon-magic-stick"
|
||
v-print="'#printMe'">局部打印(快速)</el-button>
|
||
<el-card class="box-card">
|
||
可以打印页面某部分内容，直接传入对应的唯一标识ID
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-button type="primary"
|
||
icon="el-icon-umbrella"
|
||
v-print="printObj">局部打印(对象配置)</el-button>
|
||
<el-card class="box-card">
|
||
也许你会需要一些配置，可接收一个对象，根据文档API进行设置
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider><i class="el-icon-printer"></i></el-divider>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-button type="primary"
|
||
icon="el-icon-bank-card"
|
||
v-print="printUrl">预览网址</el-button>
|
||
<el-card class="box-card">
|
||
我需要打印指定的网址(要符合同源策略) 需要传入一个对象，详细看文档API进行设置
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-button type="primary"
|
||
icon="el-icon-wallet"
|
||
v-print="printAsyncUrl">预览网址(异步)</el-button>
|
||
<el-card class="box-card">
|
||
你打印的网址(URL)也是可以通过异步得到的
|
||
</el-card>
|
||
异步获取URL:<el-progress :text-inside="true" :stroke-width="20" :percentage="times"></el-progress>
|
||
</el-col>
|
||
</el-row>
|
||
<div>
|
||
<el-divider><i class="el-icon-printer"></i></el-divider>
|
||
<div class="asyncTips">
|
||
|
||
</div>
|
||
<div class="box"
|
||
v-show="printLoading">
|
||
<div class="loader-04"></div>
|
||
正在处理...请稍等
|
||
</div>
|
||
<h3 style="text-align: left;margin-left: 30px;">下面是被打印的例子:</h3>
|
||
|
||
<div id="printMe"
|
||
style="background: #dac9c9">
|
||
<div ref="qrcode"></div>
|
||
<div ref="echartMain"
|
||
:style="{width: '300px', height: '300px'}"></div>
|
||
<input type="number" />
|
||
<input type="time" />
|
||
<input type="checkbox" />
|
||
<input type="radio" />
|
||
<select>
|
||
<option value="volvo">Volvo</option>
|
||
<option value="saab">Saab</option>
|
||
<option value="mercedes">Mercedes</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
|
||
<select>
|
||
<option value="volvo">Volvo</option>
|
||
<option value="saab">Saab</option>
|
||
<option value="mercedes">Mercedes</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<textarea name=""
|
||
id=""
|
||
cols="30"
|
||
rows="10"></textarea>
|
||
<p>葫芦娃，葫芦娃</p>
|
||
<p style="background: yellow">一根藤上七朵花</p>
|
||
<p>小小树藤是我家 啦啦啦啦</p>
|
||
<p>叮当当咚咚当当 浇不大</p>
|
||
<p>叮当当咚咚当当 是我家</p>
|
||
<p>啦啦啦啦</p>
|
||
<p>...</p>
|
||
</div>
|
||
<p>叮当当咚咚当当 浇不大</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style type="text/css">
|
||
p {
|
||
color: blue;
|
||
}
|
||
</style>
|
||
<script>
|
||
import QRCode from "qrcodejs2";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "app",
|
||
data () {
|
||
return {
|
||
printLoading: false,
|
||
times: 0,
|
||
printAsyncUrl: {
|
||
preview: true,
|
||
previewTitle: 'Test Title',
|
||
previewPrintBtnLabel: 'Print',
|
||
asyncUrl (reslove, vue) {
|
||
const _set = setInterval(() => {
|
||
vue.times += 20
|
||
}, 1000)
|
||
setTimeout(() => {
|
||
reslove(process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/')
|
||
clearInterval(_set)
|
||
}, 5000)
|
||
},
|
||
previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
|
||
previewOpenCallback:this.previewOpenCallback,
|
||
beforeOpenCallback: this.beforeOpenCallback,
|
||
openCallback: this.openCallback,
|
||
closeCallback: this.closeCallback,
|
||
clickMounted: this.clickMounted
|
||
},
|
||
printUrl: {
|
||
url: process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/',
|
||
preview: true,
|
||
previewTitle: 'Test Title',
|
||
previewPrintBtnLabel: 'Print',
|
||
previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
|
||
previewOpenCallback:this.previewOpenCallback,
|
||
beforeOpenCallback: this.beforeOpenCallback,
|
||
openCallback: this.openCallback,
|
||
closeCallback: this.closeCallback,
|
||
clickMounted: this.clickMounted
|
||
},
|
||
printObj: {
|
||
id: "printMe",
|
||
popTitle: "good print",
|
||
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
|
||
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
|
||
beforeOpenCallback: this.beforeOpenCallback,
|
||
openCallback: this.openCallback,
|
||
closeCallback: this.closeCallback,
|
||
clickMounted: this.clickMounted
|
||
|
||
},
|
||
};
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
this.echart();
|
||
new QRCode(this.$refs.qrcode, {
|
||
width: 100,
|
||
height: 100,
|
||
text: "https://www.baidu.com/",
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
clickMounted(vue) {
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '点击按钮的回调事件',
|
||
});
|
||
},
|
||
previewBeforeOpenCallback(vue) {
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '正在加载预览窗口',
|
||
});
|
||
},
|
||
previewOpenCallback(vue) {
|
||
vue.times = 0
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '已经加载完预览窗口',
|
||
type: 'success'
|
||
});
|
||
},
|
||
beforeOpenCallback(vue) {
|
||
vue.printLoading = true
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '正在准备打印控件',
|
||
});
|
||
},
|
||
openCallback(vue) {
|
||
vue.printLoading = false
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '已经打开了 打印控件',
|
||
});
|
||
},
|
||
closeCallback(vue) {
|
||
vue.$notify({
|
||
title: '消息',
|
||
message: '关闭了打印工具',
|
||
});
|
||
},
|
||
beforeOpen () {
|
||
this.printLoading = true
|
||
console.log('准备打开')
|
||
},
|
||
echart () {
|
||
let myChart = echarts.init(this.$refs.echartMain);
|
||
myChart.setOption({
|
||
title: {
|
||
text: "ECharts 入门示例",
|
||
},
|
||
tooltip: {},
|
||
xAxis: {
|
||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
|
||
},
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: "销量",
|
||
type: "bar",
|
||
data: [5, 20, 36, 10, 10, 20],
|
||
},
|
||
],
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#app::v-deep {
|
||
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-align: center;
|
||
color: #2c3e50;
|
||
margin-top: 60px;
|
||
width: 800px;
|
||
margin: 0 auto;
|
||
.el-row {
|
||
margin-bottom: 20px;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.box-card {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
[class*="loader-"] {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
color: inherit;
|
||
vertical-align: middle;
|
||
pointer-events: none;
|
||
}
|
||
.loader-04 {
|
||
border: 1px solid currentcolor;
|
||
border-radius: 50%;
|
||
-webkit-animation: 1s loader-04 linear infinite;
|
||
animation: 1s loader-04 linear infinite;
|
||
position: relative;
|
||
}
|
||
.loader-04:before {
|
||
content: "";
|
||
display: block;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
top: -0.2em;
|
||
left: 50%;
|
||
border: 0.2em solid currentcolor;
|
||
border-radius: 50%;
|
||
}
|
||
@-webkit-keyframes loader-04 {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform: rotate(360deg);
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes loader-04 {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform: rotate(360deg);
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|