zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加下载按钮微调样式

Browse Source
This commit is contained in:
huangchengfa
2025-12-11 20:59:26 +08:00
parent ba092529e6
commit b5013244e5
1 changed files with 44 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/backOfficeSystem/JudgmentHome/situationHome/components/editAddForm.vue
View File

@ -25,8 +25,12 @@
<!-- 编辑器 --> <!-- 编辑器 -->
<Editor :style="`height: 480px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig" <Editor :style="`height: 480px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig"
:mode="mode" @onCreated="handleCreated" @onChange="handChange" /> :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
</div>
<div style="display: flex; justify-content: center;">
<el-button style="display: block;" type="primary" @click="ConsultationShow = true">网上会商</el-button>
<el-button style="display: block;" type="primary" @click="downloadWithStyles(textContent)">下载</el-button>
</div> </div>
<el-button style="margin:0 auto;display: block;" type="primary" @click="ConsultationShow = true">网上会商</el-button>
</div> </div>
</div> </div>
<!-- 文字解析 --> <!-- 文字解析 -->
@ -59,7 +63,8 @@ const mode = "default";
const dataBt = ref(`<p class="html_bt"> const dataBt = ref(`<p class="html_bt">
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4> <h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4>
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊（初稿）</span></h4></p> <h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊（初稿）</span></h4></p>
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${timeValidate(new Date(), 'td')}</span></p> <p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编</span></p>
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;"> ${timeValidate(new Date(), 'td')}</span></p>
<hr/>`) <hr/>`)
//编辑器配置 //编辑器配置
const editorConfig = { const editorConfig = {
@ -125,8 +130,8 @@ const getText = (val) => {
} }
watch(() => listQuery.value, (val) => { watch(() => listQuery.value, (val) => {
let html = dataBt.value; let html = dataBt.value;
html += `<p style="text-align: center;"><span style="font-size: 22px;">${val.ypbt||''}</span></p>` html += `<p style="text-align: center;"><span style="font-size: 22px;">${val.ypbt || ''}</span></p>`
html += `<p>${val.fj||''}</p>` html += `<p>${val.fj || ''}</p>`
textContent.value = html textContent.value = html
}, },
{ {
@ -171,6 +176,41 @@ const close = () => {
listQuery.value = {} listQuery.value = {}
}; };
// 带样式的下载方法
const downloadWithStyles = (textContent) => {
const wordDocument = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>富文本导出</title>
<style>
/* 应用两端对齐样式 */
body {
text-align: justify;
text-justify: inter-character; /* 中文文本两端对齐 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}
p {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
${textContent}
</body>
</html>
`;
const blob = new Blob([wordDocument], {
type: 'application/msword'
});
saveAs(blob, '战略研判报告.doc');
};
defineExpose({ init }); defineExpose({ init });
</script> </script>