1、定义一个pdfprint组件
<template>
<div id="panel" style="height: 0;overflow: hidden;">
<p>{{info.boxesNum}}</p>
<p>{{info.code}}</p>
<p>{{info.postalCode}}</p>
<p>{{info.orderNo}}</p>
</div>
</template>
<script lang="ts">
import {
defineComponent,
} from 'vue';
export default defineComponent({
name: "pdfPrint",
props:["info"],
setup(props, {
emit
}) {
let info = props.info
const print = () => {
console.log(info)
let newPage = window.open();
const wpt = document.getElementById("panel");
const newContent = wpt.innerHTML;
// const oldContent = newPage.document.body.innerHTML;
newPage.document.body.innerHTML = newContent;
newPage.document.getElementsByTagName("body")[0].style.zoom = 0.86; //控制打印时的缩放
newPage.print(); //打印方法
// // newPage.location.reload();
// newPage.document.body.innerHTML = oldContent;
}
return {
info,
print
}
}
})
</script>
<style>
</style>
2、在父组件中引入
<template>
<a @click="printContent">打印</a>
<PdfPrint ref="pdfPrint" :info="info"/>
</template>
<script lang="ts">
import {
defineComponent,
reactive
} from 'vue';
import PdfPrint from './pdfPrint.vue'
export default defineComponent({
components: {
PdfPrint
},
setup(props, context) {
let info = reactive({
boxesNum: 0,
code: '',
postalCode: '',
orderNo: '',
})
let pdfPrint = ref()
function printContent() {
console.log(pdfPrint.value.print())
}
return {
pdfPrint,
printContent,
info,
};
}
})
</script>
<style scoped>
</style>