vue3页面html导出word文档

一、第三方包下载

使用npm下载以下插件：

npm install jszip-utils docxtemplater pizzip file-saver docxtemplater-image-module-free

二、总页面组件代码

<summaryDetails

:securityId="securityId"

:symbol="symbol"

id="summaryDetails"

</template>

import summaryDetails from './summaryDetails.vue'

const props = defineProps({

symbol: {

// 证券代码

type: String,

default: '000001'

securityId: {

// 证券id

type: [String, Number],

required: true

}

})

</script>

三、summaryDetails组件代码

<el-date-picker

v-model="dateRange"

value-format="YYYY"

type="yearrange"

range-separator="至"

start-placeholder="开始年份"

end-placeholder="结束年份"

:editable="false"

:disabled-date="disabledDate"

@change="changeDate"

@clear="changeDate1"

class="date-select"

ref="datePicker"

</div>

</template>

</div>

<div

class="item-detail"

v-for="(item, index) in summaryDetailsList"

:key="index"

</div>

<div

class="children-item"

v-for="(item1, index1) in item.items"

:key="index1"

</div>

</div>

</template>

</ItemCard>

</template>

import JSZipUtils from 'jszip-utils'

import docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import saveAs from 'file-saver'

import ImageModule from 'docxtemplater-image-module-free'

import { ElMessage } from 'element-plus'

import ItemCard from './../RiskWarn/ItemCard.vue'

import AISketch from '@/pages/monitor/views/stockMonitor/components/AISummary/AISketch.vue'

import { queryAISummaryData } from '@/pages/monitor/monitorApi/stockMonitor'

const props = defineProps({

symbol: {

// 证券代码

type: String,

default: ''

securityId: {

// 证券id

type: [String, Number],

required: true

sketchList: {

type: Array as any,

default: () => {}

}

})

interface ImageOptions {

centered: boolean

getImage: (chartId: string) => ArrayBuffer | false

getSize: () => [number, number]

}

const loading = ref(false) // 加载状态

const dateRange = ref<any>([]) // 年份范围

const securityId1 = ref(props.securityId) // 证券id

const symbol1 = ref(props.symbol) // 证券代码

const sketchList = ref<any>(props.sketchList) // 简述数据

const summaryDetailsList = ref<any>([]) // 综述详情数据

const cleanedData = ref<any>([]) // 综述详情数据

const datePicker = ref() // 时间筛选框ref

// 监听参数重新赋值

watch(

() => [props.securityId, props.symbol, props.sketchList],

(newValue: any, oldValue: any) => {

if (newValue[0] != oldValue[0]) {

securityId1.value = newValue[0]

getAISummaryData() //查询接口

}

if (newValue[1] != oldValue[1]) {

symbol1.value = newValue[1]

}

if (newValue[2] != oldValue[2]) {

sketchList.value = newValue[2]

}

dateRange.value = []

{ deep: true }

)

// 控制当前时间之后不能选

const disabledDate = (time: any) => {

const year = time.getFullYear()

return year < 2019 || year > new Date().getFullYear()

}

// 改变时间

const changeDate = (value: any) => {

if (value) {

dateRange.value = toRaw(value)

getAISummaryData()

datePicker.value.blur()

}

// 清空时间

const changeDate1 = () => {

dateRange.value = []

getAISummaryData()

}

const base64DataURLToArrayBuffer = (dataURL: string) => {

const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/

if (!base64Regex.test(dataURL)) {

return false

}

const stringBase64 = dataURL.replace(base64Regex, '')

let binaryString

if (typeof window !== 'undefined') {

binaryString = window.atob(stringBase64)

} else {

binaryString = new Buffer(stringBase64, 'base64').toString('binary')

}

const len = binaryString.length

const bytes = new Uint8Array(len)

for (let i = 0; i < len; i++) {

const ascii = binaryString.charCodeAt(i)

bytes[i] = ascii

}

return bytes.buffer

}

const downLoadDoc = (demoUrl: string, docxData: any, fileName: string) => {

// 读取并获得模板文件的二进制内容

JSZipUtils.getBinaryContent(demoUrl, function (error: any, content: any) {

// 抛出异常

if (error) {

throw error

}

let opts: ImageOptions = {

centered: false,

getImage: (chartId: string) => {

return base64DataURLToArrayBuffer(chartId) || false

getSize: () => {

return [230, 120]

}

// 创建一个PizZip实例，内容为模板的内容

let zip = new PizZip(content)

// 创建并加载docxtemplater实例对象

let doc = new docxtemplater()

.loadZip(zip)

.attachModule(new ImageModule(opts))

// 去除未定义值所显示的undefined

doc.setOptions({

nullGetter: function () {

return ''

}

})

// 设置模板变量的值，对象的键需要和模板上的变量名一致，值就是你要放在模板上的值

doc.setData({

...docxData

})

// eslint-disable-next-line no-useless-catch

try {

// 用模板变量的值替换所有模板变量

doc.render()

} catch (error) {

// 抛出异常

throw error

}

// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）

let out = doc.getZip().generate({

type: 'blob',

mimeType:

'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

})

// 将目标文件对象保存为目标类型的文件，并命名

saveAs(out, fileName)

})

}

// 导出

const exportDataList = async () => {

loading.value = true

let fileName = `${

dateRange.value && dateRange.value.length > 0

? `${dateRange.value[0]}-${dateRange.value[1]}综述`

: '今年以来综述'

// 去掉 <span style="color: #ff0000"></span> 标签

const cleanedItems = sketchList.value.map((item: any) => ({

...item,

desc: item.desc.replace(/<span style="color: #ff0000">(.*?)<\/span>/g, '$1')

}))

// 去掉 <br/> 标签

cleanedData.value = summaryDetailsList.value.map((item: any) => {

// 解决更改对象导致原数组换行标签消失问题（重新复制一份对象进行删除标签）

const newItem = JSON.parse(JSON.stringify(item))

return removeBrTags(newItem)

})

// 下载word文档

downLoadDoc(

'public/ai-report.docx',

{ items: cleanedItems, infos: cleanedData.value },

fileName

)

loading.value = false

}

// 去掉<br/>标签方法

const removeBrTags = (obj: any) => {

if (typeof obj === 'string') {

return obj.replace(/<br\/>/g, '') // 去掉 <br/> 标签

} else if (typeof obj === 'object' && obj !== null) {

for (const key in obj) {

if (Object.prototype.hasOwnProperty.call(obj, key)) {

obj[key] = removeBrTags(obj[key]) // 递归处理

}

return obj

}

// 查询数据

const getAISummaryData = () => {

loading.value = true

sketchList.value = []

summaryDetailsList.value = []

queryAISummaryData(

dateRange.value[1],

securityId1.value,

dateRange.value[0],

symbol1.value

).then((res: any) => {

if (res.code === 200) {

sketchList.value = res.data.items

summaryDetailsList.value = res.data.data

} else {

ElMessage({

type: 'error',

message: res.message

})

}

loading.value = false

})

}

onMounted(() => {

getAISummaryData()

})

</script>

.upload-box {

margin-left: 20px;

display: flex;

align-items: center;

cursor: pointer;

font-weight: normal;

.icon-baogaodaochu {

font-size: 14px;

color: #3a5bb7;

}

.upload-text {

font-size: 12px;

color: #3a5bb7;

margin-left: 3px;

}

.item {

border: 1px solid #ebeef8;

border-top: none;

.title {

display: flex;

align-items: center;

padding-left: 26px;

height: 38px;

background: #f4f7fc;

border: 1px solid #ebeef8;

border-left: none;

border-right: none;

font-weight: bold;

font-size: 14px;

color: #333333;

position: relative;

&::before {

content: '';

position: absolute;

left: 15px;

top: 50%;

margin-top: -5px;

width: 4px;

height: 10px;

background: #3a5bb7;

border-radius: 0px 2px 2px 0px;

}

.table-box {

padding: 15px;

.item-detail {

margin-bottom: 20px;

&:last-child {

margin-bottom: 0;

}

.detail-title {

width: 80px;

height: 30px;

background: rgba(58, 91, 183, 0.06);

border-radius: 6px;

font-size: 13px;

color: #3a5bb7;

display: flex;

align-items: center;

justify-content: center;

margin-right: 12px;

}

.all-detail {

margin: 10px 0;

}

.children-item {

margin-bottom: 10px;

font-size: 14px;

color: #333333;

&:last-child {

margin-bottom: 0;

}

.children-title {

margin: 5px 0;

display: flex;

align-items: center;

.dot {

width: 4px;

height: 4px;

background: #333333;

margin-right: 10px;

}

</style>

四、ItemCard组件代码

</div>

<div

class="overview-box"

v-if="

title !== '综述'

<div class="title">{{ title }}</div>

</div>

</div>

</template>

const props = defineProps({

title: {

type: String,

default: ''

aiText: {

type: String,

default: ''

sketchList: {

type: Array as any,

default: () => {}

}

})

</script>

.item-box {

width: 1410px;

margin: 0 auto;

padding: 0 20px 20px;

background: #ffffff;

border-radius: 6px;

.pub-item-title {

:deep(.right-part) {

display: flex;

align-items: center;

margin-left: auto;

.date-select {

width: 300px;

height: 28px;

--el-text-color-regular: #333333;

}

.drop-select {

margin-left: 14px;

width: 100px;

height: 28px;

font-weight: normal;

--el-text-color-regular: #333333;

.el-input__wrapper {

padding: 0 11px;

.el-input__inner {

line-height: 28px;

height: 28px;

}

.el-select__wrapper {

min-height: 28px;

}

.content-box {

margin-top: 14px;

// border: 1px solid #ebeef8;

.overview-box {

padding: 17px 15px;

border: 1px solid #ebeef8;

border-bottom: none;

.title {

padding-left: 10px;

line-height: 14px;

font-size: 14px;

color: #3a5bb7;

position: relative;

&::before {

content: '';

position: absolute;

left: 0;

top: 50%;

margin-top: -2px;

width: 4px;

height: 4px;

background: #3a5bb7;

}

.content {

margin-top: 10px;

text-align: justify;

color: #333333;

}

</style>

五、AISketch组件代码

<div class="tags">{{ item.title }}</div>

</div>

</template>

const props = defineProps({

// 简述列表

sketchList: {

type: Array as any,

default: () => {}

}

})

</script>

.AISketch {

.item-sketch {

display: flex;

align-items: center;

margin-bottom: 10px;

&:last-child {

margin-bottom: 0;

}

.tags {

width: 80px;

height: 30px;

background: rgba(58, 91, 183, 0.06);

border-radius: 6px;

font-size: 13px;

color: #3a5bb7;

display: flex;

align-items: center;

justify-content: center;

margin-right: 12px;

}

.tags-info {

font-size: 13px;

color: #666666;

}

</style>

六、在public文件夹中创建word文件（ai-report.docx）

如下编写模板（样式自调）：

综述

|简述

{#items}

{title}

{desc}

{/items}

|综述详情

{#infos}

{title}

{overview}

{#items}

·{title}

{desc}

{/items}

{/infos}