前端 导出内容为word文件

发布于:2025-08-01 ⋅ 阅读:(10) ⋅ 点赞:(0)
<template>
  <BasicModal v-bind="$attrs" width="40%" @register="registerModal" :showFooter="false" :title="getTitle"
    @close="handleCancel" @ok="handleOk">
    <template #default>
      <div class="text-indent">
        {{ textContent }}
      </div>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';

const textContent=ref('')
const getTitle = computed(() => '文件摘要');
const [registerModal, { closeModal }] = useModalInner((data)=>{
  console.log("🚀 ~ data:", data.record.fileSummary)
  textContent.value=data.record.fileSummary||'此通知包括《关于事业单位分类的意见》、《关于承担行政职能事业单位改革的意见》、《关于创新事业单位机构编制管理的意见》、《关于建立和完善事业单位法人治理结构的意见》、《关于分类推进事业单位改革中财政有关政策的意见》、《关于分类推进事业单位改革中从事生产经营单位转制为企业的假设干规定》、《关于分类推进事业单位改革中加强国有资产管理的意见》、《关于深化事业单位工作人员收入分配制度改革的意见》、《事业单位职业年金试行方法》等9个配套文件。';
});

function handleCancel() {
  closeModal();
}
function handleOk() {
  const header = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
    'xmlns:w="urn:schemas-microsoft-com:office:word" ' +
    'xmlns="http://www.w3.org/TR/REC-html40">' +
    '<head><meta charset="utf-8"></head><body>';
  const footer = '</body></html>';
  const content = `<div style="text-indent: 2em;">${textContent.value}</div>`;
  const html = header + content + footer;

  const blob = new Blob(['\ufeff', html], {
    type: 'application/msword',
  });

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = '文件摘要.doc';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);

  closeModal();
}


</script>
<style scoped lang="less">
.text-indent {
  text-indent: 2em;
}
</style>

点击确认就导出内容为doc