diff --git a/index.html b/index.html
index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..af691077f5790a358f9dda82a5a5687d32530add 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <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>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index 101d887fbb912d8980276a58b84eb565f9ac7eb6..16e3215f5dd1c9d3481a38acbc8823afc8fe3b8a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "guess": "^1.0.2",
     "vue": "^3.2.37",
     "jsbarcode": "^3.11.6",
-    "vue-html-to-paper":"^2.0.3"
+    "vue-html-to-paper":"^2.0.3",
+    "print-js":"^1.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index eb0b61b184f8a0922e87fd017ca09f91fb1fdc5e..2975939e9034a300a0288970baaa659ae22cc493 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,64 +1,9 @@
 <template>
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form ref="queryFormRef" :inline="true" :model="state.queryParams" class="-mb-15px" label-width="68px">
-      <el-form-item label="商品名称" prop="productListId">
-        <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 @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>
+    <el-button link type="primary" @click="handlePrint">
+      打印 html-to-paper
+    </el-button>
 
   </ContentWrap>
   <!-- 弹窗 -->
@@ -66,17 +11,17 @@
 
     <div id="printTest">
       <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;">{{
-          state.formData.productListName }}</el-col>
+        <el-col :span="24" style="font-size: 26px;font-weight: bold;line-height: 36px;border-bottom: 1px solid #333;">
+          标题</el-col>
         <el-col :span="16" style="line-height: 26px;padding-top:20px;">
-          贮存条件：{{ state.formData.preserve }}<br />
+          贮存条件：冷藏<br />
           生产日期：2024-05-26<br />
           保质期至：2024-05-26<br />
-          供应商：{{ state.formData.providerName }}<br />
+          供应商：华为<br />
         </el-col>
         <el-col :span="8" style='text-align:right'>
-          <span style='font-size:36px;line-height:70px;font-weight: bold;'>{{ state.formData.printPrice }}元</span><br />
-          净含量：{{ state.formData.netWeight }}g±{{ state.formData.weightRange }}g
+          <span style='font-size:36px;line-height:70px;font-weight: bold;'>23元</span><br />
+          净含量：23g
         </el-col>
         <el-col :span="24">
           <img :src="barcodeImage" alt="Barcode Image" v-if="barcodeImage" />
@@ -86,14 +31,16 @@
       </el-row>
     </div>
     <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>
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
 import JsBarcode from 'jsbarcode';
-import VueHtmlToPaper from 'vue-html-to-paper';
+
+import printJS from 'print-js';
 
 // const message = useMessage()
 const state: any = reactive({
@@ -111,7 +58,7 @@ const state: any = reactive({
   total: 0,
   // 表格数据
   list: [{
-    productListName: 'asdfasfd'
+    productListName: '打印'
   }],
   formData: {},
   iframeSrc: ''
@@ -131,9 +78,8 @@ const barcodeCanvas = ref();
 
 const dialogTableVisible = ref(false)
 
-const handlePrint = async (row) => {
+const handlePrint = () => {
   dialogTableVisible.value = true
-  state.formData = row
   // state.iframeSrc= await Api.getTask(row.id)
   nextTick(() => {
 
@@ -148,10 +94,11 @@ const handlePrint = async (row) => {
   })
 
 }
-
+const { proxy } = getCurrentInstance();
 /***打印 */
 const printHtml = (params) => {
-  VueHtmlToPaper.$htmlToPaper("printTest", {
+  console.log(proxy, 'proxy')
+  proxy.$htmlToPaper("printTest", {
     name: '_blank',
     specs: [
       'fullscreen=yes',
@@ -162,13 +109,25 @@ const printHtml = (params) => {
       'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.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
     windowTitle: window.document.title, // override the window title
   })
 }
 
-/** 初始化 **/
-onMounted(() => {
-})
+const printHtml2 = () => {
+  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>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a2506294bcc8223c4cf7f39c5cad5d6aa27fae4b..37c0642f2cbd426b099d5c139ed7630673d90652 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,4 +5,26 @@ import 'element-plus/dist/index.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')
