132 lines
6.1 KiB
HTML
132 lines
6.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>上传并打印文件</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<a-config-provider>
|
|||
|
|
<a-layout>
|
|||
|
|
<a-layout-content>
|
|||
|
|
<a-card title="上传并打印文件">
|
|||
|
|
<p>打印机状态: {{ printerStatus }}</p>
|
|||
|
|
<a-progress :percent="printProgress" v-if="printProgress > 0" />
|
|||
|
|
<a-form :form="form" @submit="handleSubmit">
|
|||
|
|
<a-form-item label="选择文件">
|
|||
|
|
<a-upload
|
|||
|
|
name="file"
|
|||
|
|
:before-upload="beforeUpload"
|
|||
|
|
:file-list="fileList"
|
|||
|
|
>
|
|||
|
|
<a-button>
|
|||
|
|
<template #icon>
|
|||
|
|
<UploadOutlined />
|
|||
|
|
</template>
|
|||
|
|
点击上传
|
|||
|
|
</a-button>
|
|||
|
|
</a-upload>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="打印选项">
|
|||
|
|
<a-select v-decorator="['printOption', { rules: [{ required: true, message: '请选择打印选项!' }] }]">
|
|||
|
|
<a-select-option value="all">打印所有页面</a-select-option>
|
|||
|
|
<a-select-option value="odd">打印奇数页</a-select-option>
|
|||
|
|
<a-select-option value="even">打印偶数页</a-select-option>
|
|||
|
|
<a-select-option value="specific">打印指定页面</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item v-if="form.getFieldValue('printOption') === 'specific'" label="页面">
|
|||
|
|
<a-input v-decorator="['pages', { rules: [{ required: true, message: '请指定页面!' }] }]" placeholder="例如，1,3,5-7" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item>
|
|||
|
|
<a-button type="primary" html-type="submit">上传并打印</a-button>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-card>
|
|||
|
|
</a-layout-content>
|
|||
|
|
</a-layout>
|
|||
|
|
</a-config-provider>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: this.$form.createForm(this, { name: 'coordinated' }),
|
|||
|
|
fileList: [],
|
|||
|
|
printerStatus: '未配置',
|
|||
|
|
printProgress: 0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.fetchPrinterStatus();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleSubmit(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
this.form.validateFields((err, values) => {
|
|||
|
|
if (!err) {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', this.fileList[0]);
|
|||
|
|
formData.append('printOption', values.printOption);
|
|||
|
|
formData.append('pages', values.pages || '');
|
|||
|
|
|
|||
|
|
fetch('/upload', {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData
|
|||
|
|
})
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
if (data.progress) {
|
|||
|
|
this.printProgress = data.progress;
|
|||
|
|
this.pollPrintProgress();
|
|||
|
|
} else {
|
|||
|
|
this.$message.success(data.message);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Error:', error);
|
|||
|
|
this.$message.error('上传并打印文件失败。');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
beforeUpload(file) {
|
|||
|
|
this.fileList = [...this.fileList, file];
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
fetchPrinterStatus() {
|
|||
|
|
fetch('/get-printer-status')
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
this.printerStatus = data.status;
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('获取打印机状态失败:', error);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
pollPrintProgress() {
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
fetch('/get-print-progress')
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
this.printProgress = data.progress;
|
|||
|
|
if (data.progress >= 100) {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
this.$message.success('打印完成');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('获取打印进度失败:', error);
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|