<template>
<div v-loading.fullscreen.lock="fullscreenLoading" class="main-article">
<div ref="content" class="node-article-content">测试打印pdf</div>
<!-- 应用到input按钮上,设置该类 -->
<el-button value="打印" @click="dayin" :class="cla">打印</el-button>
<el-button value="打印" @click="back" :class="cla">返回</el-button>
</div>
</template>
<script>
export default {
data() {
return {
article: "",
fullscreenLoading: false,
cla: "none",
};
},
mounted() {},
methods: {
back() {
this.$router.push("/example/tree");
},
dayin() {
this.cla = "noprint";
document.title = "123";
setTimeout(() => {
this.fullscreenLoading = false;
this.$nextTick(() => {
window.print();
});
}, 3000);
},
},
};
</script>
<style type="text/css" media="print">
.noprint {
display: none;
}
@page {
size: auto;
margin: 0mm;
}
</style>
<style lang="scss">
@mixin clearfix {
&:before {
display: table;
content: "";
clear: both;
}
&:after {
display: table;
content: "";
clear: both;
}
}
.main-article {
padding: 20px;
margin: 0 auto;
display: block;
width: 740px;
background: #fff;
}
.article__heading {
position: relative;
padding: 0 0 20px;
overflow: hidden;
}
.article__heading__title {
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 32px;
line-height: 48px;
font-weight: 600;
color: #333;
overflow: hidden;
}
.node-article-content {
margin: 20px 0 0;
@include clearfix;
font-size: 16px;
color: #333;
letter-spacing: 0.5px;
line-height: 28px;
margin-bottom: 30px;
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman",
Times, serif;
& > :last-child {
margin-bottom: 0;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
p {
font-weight: 400;
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -0.003em;
}
ul {
margin-bottom: 30px;
}
li {
--x-height-multiplier: 0.375;
--baseline-multiplier: 0.17;
letter-spacing: 0.01rem;
font-weight: 400;
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -0.003em;
margin-left: 30px;
margin-bottom: 14px;
}
a {
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.84) 100%,
rgba(0, 0, 0, 0) 0
);
background-size: 1px 1px;
background-position: 0 calc(1em + 1px);
padding: 0 6px;
}
code {
background: rgba(0, 0, 0, 0.05);
padding: 3px 4px;
margin: 0 2px;
font-size: 16px;
display: inline-block;
}
img {
border: 0;
}
/* 解决 IE6-7 图片缩放锯齿问题 */
img {
-ms-interpolation-mode: bicubic;
}
blockquote {
--x-height-multiplier: 0.375;
--baseline-multiplier: 0.17;
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman",
Times, serif;
letter-spacing: 0.01rem;
font-weight: 400;
font-style: italic;
font-size: 21px;
line-height: 1.58;
letter-spacing: -0.003em;
border-left: 3px solid rgba(0, 0, 0, 0.84);
padding-left: 20px;
margin-left: -23px;
padding-bottom: 2px;
}
a {
text-decoration: none;
}
h2,
h3,
h4 {
font-size: 34px;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 53px 0 0;
}
h4 {
font-size: 26px;
}
}
</style>
打印的时候,页眉页脚不可以修改,但是可以让它们消失
<style type="text/css" media="print">
@page {
size: auto;
margin: 0mm;
}
</style>