let content = `<?xml version="1.0" encoding="utf-8"?> <ReceiptModule> <Setting> <LineSpace>30</LineSpace> <AlignType>0</AlignType> <SpaceChar>0</SpaceChar> <SpaceCharChinese>0</SpaceCharChinese> <AlignType>1</AlignType> <FontSize> <iWidth>1</iWidth> <iHeight>2</iHeight> </FontSize> <FontBold>true</FontBold> </Setting> <Content>粤北第二人民医院自助挂号单${info['isLog'] ? '(补打)' : ''}</Content> <Content></Content> <Barcode> <BarcodeType>10</BarcodeType> <Width>2</Width> <Height>120</Height> <HRI>0</HRI> <BarcodeString>${info['cardNo']}</BarcodeString> <Align>-2</Align> </Barcode> <Content></Content> <Setting> <AlignType>0</AlignType> </Setting> <Content>挂号方式:${payTypeCode(info['payMethod'])} 医生:${info['docName']}</Content> <Setting> <FontSize> <iWidth>1</iWidth> <iHeight>1</iHeight> </FontSize> <FontBold>false</FontBold> </Setting> <Content>--------------------------------</Content> <Setting> <FontSize> <iWidth>1</iWidth> <iHeight>2</iHeight> </FontSize> <FontBold>true</FontBold> </Setting> <Content>姓名:${info['name']} ID:${info['cardNo']}</Content> <Content>性别:${info['gender']} 年龄:${info['age']}</Content> <Content>支付方式:${info['payment_type']}</Content> <Content>缴费金额:${info['total']}</Content> <Content>预约日期:${info['date']}</Content> <Content>就诊位置:${info['address']}</Content> <Content>诊室:${info['deptName']}</Content> <Content>打印时间:${info['time']}</Content> <Content>终端机号:${info['code']}</Content> <Setting> <FontSize> <iWidth>1</iWidth> <iHeight>1</iHeight> </FontSize> <FontBold>false</FontBold> </Setting> <Content>--------------------------------</Content> <Content>注意: 本次挂号仅当日使用</Content> <Content></Content> <Setting> <AlignType>${store.state.height > 800 ? 0 : 1}</AlignType> </Setting> <Setting> <AlignType>1</AlignType> <FontBold>true</FontBold> <FontSize> <iWidth>1</iWidth> <iHeight>2</iHeight> </FontSize> </Setting> <Content>请保管好此单据,遗失不补</Content> <Br></Br> <FeedLine>80</FeedLine> <Cut>1</Cut> </ReceiptModule>`;
时间: 2025-06-17 10:48:57 浏览: 16
### 生成和打印自定义格式收据的解决方案
为了实现带有字体设置、对齐方式、条形码等元素的收据打印功能,可以扩展 `this.$msPrint.goPrint` 方法以支持动态数据插入和 XML 格式化内容。以下是详细的实现方案[^1]。
#### 1. 扩展打印方法以支持 XML 格式化内容
通过修改或扩展 Vue 插件中的 `goPrint` 方法,使其能够解析 XML 格式的收据内容,并动态插入数据。以下是一个可能的实现:
```javascript
// 定义 Vue 插件
const MsPrint = {
install(Vue) {
Vue.prototype.$msPrint = {
goPrint(template, data) {
// 替换模板中的占位符
const formattedContent = template.replace(/{([^}]+)}/g, (match, key) => {
return data[key.trim()] || '';
});
// 创建临时 DOM 元素
const printWindow = window.open('', '_blank');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.center { text-align: center; }
.barcode { font-family: 'Code128', monospace; }
</style>
</head>
<body onload="window.print(); window.close();">
${formattedContent}
</body>
</html>
`);
printWindow.document.close();
}
};
}
};
// 在 Vue 应用中使用插件
Vue.use(MsPrint);
```
此代码片段展示了如何将动态数据插入到 XML 模板中,并在新窗口中打印生成的内容[^2]。
#### 2. 使用 XML 格式化模板
XML 格式化模板可以通过字符串形式传递给 `goPrint` 方法。以下是一个示例模板:
```xml
<div class="center">
<h1>收据</h1>
<p>日期:{date}</p>
<p>订单号:{orderNumber}</p>
<table border="1" cellpadding="5">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
{items}
</table>
<p>总计:{totalAmount}</p>
<p class="barcode">{barcode}</p>
</div>
```
#### 3. 动态数据插入
动态数据可以通过对象形式传递给 `goPrint` 方法。以下是一个示例数据对象:
```javascript
const receiptData = {
date: '2023-10-01',
orderNumber: 'ORD123456',
items: `
<tr><td>商品A</td><td>2</td><td>$10</td><td>$20</td></tr>
<tr><td>商品B</td><td>1</td><td>$15</td><td>$15</td></tr>
`,
totalAmount: '$35',
barcode: '123456789012'
};
```
#### 4. 调用打印方法
在组件中调用 `goPrint` 方法时,将模板和数据作为参数传递:
```javascript
methods: {
printReceipt() {
const xmlTemplate = `
<div class="center">
<h1>收据</h1>
<p>日期:{date}</p>
<p>订单号:{orderNumber}</p>
<table border="1" cellpadding="5">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
{items}
</table>
<p>总计:{totalAmount}</p>
<p class="barcode">{barcode}</p>
</div>
`;
const receiptData = {
date: '2023-10-01',
orderNumber: 'ORD123456',
items: `
<tr><td>商品A</td><td>2</td><td>$10</td><td>$20</td></tr>
<tr><td>商品B</td><td>1</td><td>$15</td><td>$15</td></tr>
`,
totalAmount: '$35',
barcode: '123456789012'
};
this.$msPrint.goPrint(xmlTemplate, receiptData);
}
}
```
此代码片段展示了如何将 XML 模板和动态数据传递给 `goPrint` 方法以生成并打印收据[^3]。
#### 5. 字体设置与条形码生成
为了确保条形码的正确显示,需要引入支持条形码字体的样式文件,并将其嵌入到打印页面中。例如,可以使用 Code128 字体:
```css
.barcode {
font-family: 'Code128', monospace;
font-size: 20px;
}
```
此外,还可以通过 JavaScript 库(如 JsBarcode)动态生成条形码图像[^4]。
### 注意事项
- 确保模板中的占位符与数据对象的键名一致。
- 如果需要更复杂的样式控制,可以在模板中添加更多的 CSS 样式。
- 测试不同浏览器的兼容性,确保打印效果一致。
阅读全文
相关推荐


















