Skip to content

V
vue3-element-lus

yma16 / vue3-element-lus
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
vue3-element-lus
提交 b1e2b51f 编写于 作者: Q qq_38870145
浏览文件
操作

Auto Commit

上级 acc0d41c
显示空白变更内容
内联 并排
Showing with 63 addition and 79 deletion
index.html
浏览文件 @ b1e2b51f
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <link rel="stylesheet" type="text/css" href="print.css">
<title>打印</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
浏览文件 @ b1e2b51f
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
"guess": "^1.0.2", "guess": "^1.0.2",
"vue": "^3.2.37", "vue": "^3.2.37",
"jsbarcode": "^3.11.6", "jsbarcode": "^3.11.6",
"vue-html-to-paper":"^2.0.3" "vue-html-to-paper":"^2.0.3",
"print-js":"^1.6.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue": "^3.0.1",
......
src/components/HelloWorld.vue
浏览文件 @ b1e2b51f
<template> <template>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<ContentWrap> <ContentWrap>
<el-form ref="queryFormRef" :inline="true" :model="state.queryParams" class="-mb-15px" label-width="68px"> <el-button link type="primary" @click="handlePrint">
<el-form-item label="商品名称" prop="productListId"> 打印 html-to-paper
<el-input v-model="state.queryParams.productListId" class="!w-210px" clearable placeholder="商品名称或Id" />
</el-form-item>
<el-form-item label="门店名称" prop="storeId">
<el-input v-model="state.queryParams.storeId" class="!w-210px" clearable placeholder="请输入门店名称或Id" />
</el-form-item>
<el-form-item label="创建时间" prop="creatTime">
<el-date-picker v-model="state.queryParams.creatTime" type="datetimerange" class="!w-350px"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="x" />
</el-form-item>
<el-form-item>
<el-button @click="getList">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button> </el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table :data="state.list" ref="multipleTableRef" :cell-style="{ 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center' }">
<el-table-column :show-overflow-tooltip="true" type="index" label="序号" width="80" />
<el-table-column :show-overflow-tooltip="true" label="商品信息" prop="productListName" />
<el-table-column :show-overflow-tooltip="true" label="门店名称" prop="storeName" />
<el-table-column :show-overflow-tooltip="true" label="打印价格(元)" prop="printPrice" />
<el-table-column :show-overflow-tooltip="true" label="打印数量" prop="printCount" />
<el-table-column :show-overflow-tooltip="true" label="供应商" prop="providerName" />
<el-table-column :show-overflow-tooltip="true" label="商品重量(g)" prop="netWeight" />
<el-table-column :show-overflow-tooltip="true" label="生产保质期" width="250">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="保存条件" prop="preserve" />
<el-table-column :show-overflow-tooltip="true" label="创建信息" prop="cwcAbbr">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="修改信息" prop="cwcAbbr">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button link type="primary" @click="handlePrint(scope.row)">
打印
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
...@@ -66,17 +11,17 @@ ...@@ -66,17 +11,17 @@
<div id="printTest"> <div id="printTest">
<el-row style="border:1px solid #333;padding:20px;width: 600px;height: 360px;font-size: 16px;" id="printMe"> <el-row style="border:1px solid #333;padding:20px;width: 600px;height: 360px;font-size: 16px;" id="printMe">
<el-col :span="24" style="font-size: 26px;font-weight: bold;line-height: 36px;border-bottom: 1px solid #333;">{{ <el-col :span="24" style="font-size: 26px;font-weight: bold;line-height: 36px;border-bottom: 1px solid #333;">
state.formData.productListName }}</el-col> 标题</el-col>
<el-col :span="16" style="line-height: 26px;padding-top:20px;"> <el-col :span="16" style="line-height: 26px;padding-top:20px;">
贮存条件：{{ state.formData.preserve }}<br /> 贮存条件：冷藏<br />
生产日期：2024-05-26<br /> 生产日期：2024-05-26<br />
保质期至：2024-05-26<br /> 保质期至：2024-05-26<br />
供应商：{{ state.formData.providerName }}<br /> 供应商：华为<br />
</el-col> </el-col>
<el-col :span="8" style='text-align:right'> <el-col :span="8" style='text-align:right'>
<span style='font-size:36px;line-height:70px;font-weight: bold;'>{{ state.formData.printPrice }}元</span><br /> <span style='font-size:36px;line-height:70px;font-weight: bold;'>23元</span><br />
净含量：{{ state.formData.netWeight }}g±{{ state.formData.weightRange }}g 净含量：23g
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<img :src="barcodeImage" alt="Barcode Image" v-if="barcodeImage" /> <img :src="barcodeImage" alt="Barcode Image" v-if="barcodeImage" />
...@@ -86,14 +31,16 @@ ...@@ -86,14 +31,16 @@
</el-row> </el-row>
</div> </div>
<template #footer> <template #footer>
<el-button type="primary" @click="printHtml" v-if="barcodeImage">打印</el-button> <el-button type="primary" @click="printHtml">打印html-to-paper</el-button>
<el-button type="primary" @click="printHtml2">打印 printjs</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue' import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import JsBarcode from 'jsbarcode'; import JsBarcode from 'jsbarcode';
import VueHtmlToPaper from 'vue-html-to-paper';
import printJS from 'print-js';
// const message = useMessage() // const message = useMessage()
const state: any = reactive({ const state: any = reactive({
...@@ -111,7 +58,7 @@ const state: any = reactive({ ...@@ -111,7 +58,7 @@ const state: any = reactive({
total: 0, total: 0,
// 表格数据 // 表格数据
list: [{ list: [{
productListName: 'asdfasfd' productListName: '打印'
}], }],
formData: {}, formData: {},
iframeSrc: '' iframeSrc: ''
...@@ -131,9 +78,8 @@ const barcodeCanvas = ref(); ...@@ -131,9 +78,8 @@ const barcodeCanvas = ref();
const dialogTableVisible = ref(false) const dialogTableVisible = ref(false)
const handlePrint = async (row) => { const handlePrint = () => {
dialogTableVisible.value = true dialogTableVisible.value = true
state.formData = row
// state.iframeSrc= await Api.getTask(row.id) // state.iframeSrc= await Api.getTask(row.id)
nextTick(() => { nextTick(() => {
...@@ -148,10 +94,11 @@ const handlePrint = async (row) => { ...@@ -148,10 +94,11 @@ const handlePrint = async (row) => {
}) })
} }
const { proxy } = getCurrentInstance();
/***打印 */ /***打印 */
const printHtml = (params) => { const printHtml = (params) => {
VueHtmlToPaper.$htmlToPaper("printTest", { console.log(proxy, 'proxy')
proxy.$htmlToPaper("printTest", {
name: '_blank', name: '_blank',
specs: [ specs: [
'fullscreen=yes', 'fullscreen=yes',
...@@ -162,13 +109,25 @@ const printHtml = (params) => { ...@@ -162,13 +109,25 @@ const printHtml = (params) => {
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css' 'https://unpkg.com/kidlat-css/css/kidlat.css'
], ],
timeout: 1000, // default timeout before the print window appears timeout: 100000, // default timeout before the print window appears
autoClose: true, // if false, the window will not close after printing autoClose: true, // if false, the window will not close after printing
windowTitle: window.document.title, // override the window title windowTitle: window.document.title, // override the window title
}) })
} }
/** 初始化 **/ const printHtml2 = () => {
onMounted(() => { dialogTableVisible.value = true
}) printJS({
printable: 'printTest', // 要打印内容的id
type: 'html', // 可以打印html,img详细的可以在官方文档https://printjs.crabbly.com/中查询
targetStyles: ['*'],
// style: ``, // 打印的内容是没有css样式的，此处需要string类型的css样式
// style: `@page{size:auto;margin: 0cm;}`, // 打印的内容是没有css样式的，此处需要string类型的css样式
scanStyles: true,
onLoadingEnd() {
// showPrintNode.value = false
}
})
}
</script> </script>
\ No newline at end of file
src/main.js
浏览文件 @ b1e2b51f
...@@ -5,4 +5,26 @@ import 'element-plus/dist/index.css' ...@@ -5,4 +5,26 @@ import 'element-plus/dist/index.css'
import './assets/main.css' import './assets/main.css'
createApp(App).use(ElementPlus).mount('#app') import VueHtmlToPaper from 'vue-html-to-paper';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
],
timeout: 100000, // default timeout before the print window appears
autoClose: false, // if false, the window will not close after printing
windowTitle: '打印', // override the window title
}
createApp(App)
.use(ElementPlus)
.use(VueHtmlToPaper, options)
.mount('#app')
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或