|
|
@@ -0,0 +1,165 @@
|
|
|
+<template>
|
|
|
+ <div class="bgColor">
|
|
|
+ <div class="body">
|
|
|
+ <div class="header">
|
|
|
+ <div class="text">报告预览</div>
|
|
|
+ <div class="delete">
|
|
|
+ <el-button
|
|
|
+ style="margin-right: 10px"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="btn"
|
|
|
+ v-print="'#print'"
|
|
|
+ >打印</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button
|
|
|
+ style="margin-right: 10px"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="btn"
|
|
|
+ @click="downloadPNG"
|
|
|
+ >导出</el-button
|
|
|
+ > -->
|
|
|
+ <span style="padding: 20px">X</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div id="print">
|
|
|
+ <div class="tableInfo">
|
|
|
+ <div class="title" style="text-align: center">质量日报</div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="text">产品批次：</div>
|
|
|
+ <div class="text">产品型号：</div>
|
|
|
+ <div class="text">报告日期：2024年04月23日</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Name</th>
|
|
|
+ <th>Age</th>
|
|
|
+ <th>Country</th>
|
|
|
+ <th>Country</th>
|
|
|
+ <th>Country</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in 30">
|
|
|
+ <td>John Doe</td>
|
|
|
+ <td>30</td>
|
|
|
+ <td>USA</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Jane Smith</td>
|
|
|
+ <td>25</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Maria Garcia</td>
|
|
|
+ <td>35</td>
|
|
|
+ <td>Spain</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ <td>Canada</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+// import html2canvas from "html2canvas";
|
|
|
+
|
|
|
+// const downloadPNG = async () => {
|
|
|
+// try {
|
|
|
+// const canvas = await html2canvas(document.getElementById("print"));
|
|
|
+// const imgData = canvas.toDataURL("image/png");
|
|
|
+// const downloadLink = document.createElement("a");
|
|
|
+// downloadLink.href = imgData;
|
|
|
+// downloadLink.download = "download.png";
|
|
|
+// downloadLink.click();
|
|
|
+// } catch (error) {
|
|
|
+// console.error("Error generating PNG:", error);
|
|
|
+// }
|
|
|
+// };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@media print {
|
|
|
+ #print {
|
|
|
+ position: absolute; /* 或 absolute, fixed, 根据需要调整 */
|
|
|
+ top: 20px; /* 调整顶部位置 */
|
|
|
+ margin: 0; /* 重置边距 */
|
|
|
+ width: 700px;
|
|
|
+ }
|
|
|
+}
|
|
|
+table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse; /* 合并表格边框 */
|
|
|
+}
|
|
|
+th,
|
|
|
+td {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
|
|
|
+ padding: 8px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+th {
|
|
|
+ background-color: #f2f2f2; /* 设置表头的背景颜色 */
|
|
|
+}
|
|
|
+
|
|
|
+.bgColor {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 99999;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ left: 0;
|
|
|
+ .body {
|
|
|
+ width: 800px;
|
|
|
+ height: 85vh;
|
|
|
+ background-color: white;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20px;
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tableInfo {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 10px 0;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
