| src/assets/css/printcss.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/fun/printJs/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/home/components/editDietary.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/home/components/fangAn/editDietary.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/home/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/css/printcss.css
New file @@ -0,0 +1,57 @@ .gridtable { font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } .gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #a4b0e2; } .gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } input { /* 去除所有边框 */ border: none; text-align: center; font-size: 12px; /* 设置下边框 */ border-bottom: 1px solid #000; /* 您可以根据需要调整颜色和宽度 */ /* 可选：设置背景透明 */ background-color: transparent; /* 移除内边距和外边距 */ padding: 5px 0; /* 根据需要调整上下内边距，确保文本与线条之间有足够的空间 */ margin: 0; /* 移除默认轮廓 */ outline: none; /* 移除浏览器默认样式 */ appearance: none; -webkit-appearance: none; } /* 可选：为聚焦状态添加自定义样式 */ input:focus { /* 当输入框获得焦点时，改变下边框的颜色或增加一些视觉提示 */ border-bottom-color: #007BFF; /* 聚焦时的下边框颜色 */ /* 可选：添加轻微的阴影效果来突出显示 */ box-shadow: 0 1px 0 0 #007BFF; /* 在下边框下方添加一条颜色相同的阴影 */ } src/views/fun/printJs/index.vue
@@ -7,12 +7,109 @@ :closable="false" class="mb15" ></el-alert> <el-button @click="onPrintJs" size="default" type="primary"> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> <el-alert title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`" type="success" :closable="false" class="mb15" ></el-alert> </el-card> </div> <el-button @click="onPrintJs" size="default" type="primary"> <SvgIcon name="iconfont icon-dayin" /> 点击打印演示 </el-button> </el-card> </div> </template> <script setup lang="ts" name="funPrintJs"> src/views/home/components/editDietary.vue
@@ -1,8 +1,8 @@ <template> <div class="dietarySurvey-item"> <el-dialog v-model="state.dialogTableVisible" title="膳食生活调查表" :fullscreen="true" width="100%"> <el-dialog v-model="state.dialogTableVisible" title="膳食生活调查22表" :fullscreen="true" width="100%"> <div class="container" style="width: 100%; height: 100%;overflow: auto;"> <div id="printMe"> <div ref="printRef"> <div> <el-form size="small"> <div style="width: 100%"> @@ -906,14 +906,14 @@ <el-button type="primary" @click="onSubmit"> 保存 </el-button> <el-button v-if="state.viewInfo.id" type="primary" v-print="'#printMe'"> <el-button v-if="state.viewInfo.id" type="primary" @click="onPrint"> <el-icon><Printer /></el-icon> 打印 </el-button> <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF"> <!-- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF"> <el-icon><Position /></el-icon> 导出 </el-button> </el-button> --> </div> </template> @@ -924,8 +924,9 @@ </template> <script setup lang="ts" name="visualizingLinkDemo2"> <script setup lang="ts" > import html2pdf from 'html2pdf.js'; import printJs from 'print-js'; import { reactive, onMounted, onUnmounted, ref } from 'vue'; import { formatDate } from '/@/utils/formatTime'; import { NextLoading } from '/@/utils/loading'; @@ -941,6 +942,8 @@ const { userInfos } = storeToRefs(stores); const router = useRouter() const emit = defineEmits([ "shuaxin" ]); // 定义变量内容 const printRef = ref(); const state = reactive({ dialogTableVisible:false, tableData: { @@ -1140,7 +1143,13 @@ } // 打印 const onPrint=()=>{ printJs({ printable: printRef.value, type: 'html', css: ['@/assets/css/printcss.css','//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'], scanStyles: false, style: `@media print{}}`, }); } const generatePDF=()=> { const element = document.getElementById('printMe'); @@ -1410,36 +1419,6 @@ <style scoped lang="scss"> @media print { body * { visibility: hidden; } #printMe, #printMe * { visibility: visible; } #printMe { position: absolute; top: 0; left: 0; width: 100%; } /* 防止内容在页面边界处被截断 */ p, h1, div { page-break-inside: avoid; } /* 确保表格行不会被截断（如果有表格的话） */ table tr { page-break-inside: avoid; } /* 设置页面大小和边距 */ @page { size: A4; margin: 0mm; } } .gridtable { font-family: verdana, arial, sans-serif; font-size: 11px; src/views/home/components/fangAn/editDietary.vue
@@ -2,7 +2,7 @@ <div class="dietarySurvey-item"> <el-dialog v-model="state.dialogTableVisible" title="营养饮食指导方案" :fullscreen="true" width="100%"> <div class="container" style="width: 100%; height: 100%;overflow: auto;" > <div id="fanganprintFrom1" class="print-section"> <div ref="printRef" id="fanganprintFrom1" class="print-section"> <div> <el-form size="small"> <div style="width: 100%"> @@ -609,18 +609,18 @@ <el-button type="primary" @click="onSubmit"> 保存 </el-button> <el-button v-if="state.viewInfo.id" type="primary" v-print="'#fanganprintFrom1'"> <el-button v-if="state.viewInfo.id" type="primary" @click="onPrint"> <el-icon> <Printer /> </el-icon> 打印 </el-button> <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF"> <!-- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF"> <el-icon> <Position /> </el-icon> 导出 </el-button> </el-button> --> </div> </template> @@ -656,6 +656,7 @@ import html2pdf from 'html2pdf.js'; import html2canvas from 'html2canvas'; import { jsPDF } from 'jspdf'; import printJs from 'print-js'; import { reactive, onMounted, onUnmounted, ref,computed} from 'vue'; import { formatDate } from '/@/utils/formatTime'; import { NextLoading } from '/@/utils/loading'; @@ -671,6 +672,8 @@ const { patientsInfo } = storeToRefs(storesPat); const { userInfos } = storeToRefs(stores); const router = useRouter() // 定义变量内容 const printRef = ref(); const emit = defineEmits(["shuaxin"]); const state = reactive({ centerDialogVisibleYZDBZ:false, @@ -824,6 +827,16 @@ } }) // 打印 const onPrint=()=>{ printJs({ printable: printRef.value, type: 'html', css: ['@/assets/css/printcss.css','//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'], scanStyles: false, style: `@media print{}}`, }); } const numberPart=(str:any)=>{ if(str){ // 使用正则表达式匹配数字 @@ -933,10 +946,6 @@ } const funhui = () => { state.dialogTableVisible = false } // 打印 const onPrint = () => { } const generatePDF = () => { const element = document.getElementById('fanganprintFrom1'); src/views/home/index.vue
@@ -152,7 +152,7 @@ </el-row> <div class="fixed-div" v-show="patientsInfo.patientName"> <el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" /> <div @click="state.isTable = false">{{ patientsInfo.patientName }}</div> <div>{{ patientsInfo.patientName }}</div> </div> </div> </template>
