vue项目通过点击文字上传html文件，查看html文件

上传html文件

解决思路：新建一个上传组件，将它挪到页面之外。当点击文字时，手动触发上传组件，打开上传文件框。

<template>
  <BasicTable @register="registerTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="[
          {
          label: '上传',
          onClick: handleUploadClick.bind(null, record),
          },
          {
          label: '上传记录',
          onClick: handleCheck.bind(null, record),
          }
          ]" />
      </template>
    </template>
  </BasicTable>

  <!-- 页面外的上传组件，点击文字后触发 -->
  <a-upload ref="uploadDom" :show-upload-list="false" :customRequest="handleUpload" class="record-uploader">
    <a-button type="primary">上传已填写的模板</a-button>
  </a-upload>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, unref, onUpdated } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { message } from 'ant-design-vue';
  import { grtBannerList } from "/@/api/b2b/serviceManagement";
  import { getBasicColumns } from './index.data';
  import { uploadHtml } from '/@/api/b2b/systemSet';
  import {
    Button,
    Upload,
  } from 'ant-design-vue';

  export default defineComponent({
    name: 'agreementSetPage',
    components: {
      BasicTable,
      AButton: Button,
      AUpload: Upload,
      TableAction,
    },
    setup() {
      const [registerTable, { setShowPagination }] = useTable({
        // api: grtBannerList,
        dataSource: tableData,
        columns: getBasicColumns(),
        useSearchForm: false,
        tableSetting: {
          redo: false,
          size: false,
        },
        showIndexColumn: false,
        rowKey: 'id',
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action'
        },
      });

      const tabActiveKey = ref<string | number>('1');
      const uploadDom = ref(null)
      // 手动触发上传
      function handleUploadClick(record: any) {
        tabActiveKey.value = record.id
        uploadDom.value.$el.querySelector('button').click()
      }
      // 上传方法
      function handleUpload(file) {
        if (file.file.type !== "text/html") {
          message.warning('请上传html格式的文件')
          return
        }
        let formData = new FormData();
        formData.append('file', file.file);
        formData.append('type', unref(tabActiveKey));
        uploadHtml(formData).then(async (res) => {
          message.success('上传成功')
        });
      }
      // 查看上传记录
      function handleCheck(record) {
        tabActiveKey.value = record.id
        title.value = `上传记录（${record.agreementType}）`
        let data = { id: record.id }
        openModalOperateRecord(true, data);
      }

      return {
        registerTable,
        registerOperateRecord,
        isShow,
        handleUploadClick,
        handleCheck,
        bannerDate,
        handleUpload,
        tabActiveKey,
        uploadDom,
        tabActiveKey,
        title
      };
    }
  })
</script>

查看html文件

解决思路：将接口返回的html完整文件代码缓存到本地，然后读取本地保存的html数据，使用新窗口打开，就能查看html文件。

<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" okText="确定" cancelText="取消"
      :canFullscreen="false" :footer="null" @visible-change="handleVisibleChange" @ok="handleOk"
      wrapClassName="recordModalWrap" :useWrapper="false" :width="630" :top="19">
      <BasicTable @register="registerRecordTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction :actions="[
      {
        label: '查看',
        onClick: handleCheck.bind(null, record),
      },
    ]" />
          </template>
        </template>
      </BasicTable>
    </BasicModal>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
import { GetOperateRecordPage } from '/@/api/b2b/systemSet';

const recordColumns: BasicColumn[] = [
  {
    title: '上传时间',
    dataIndex: 'createTime',
  },
];
export default defineComponent({
  name: 'SystemSetOperateRecord',
  components: { BasicTable, BasicModal, TableAction },
  props: {
    tabActiveKey: { type: [String, Number], require: true },
    title: { type: String, default: '' }
  },
  emits: ['success', 'register'],
  setup(props, { emit }) {
    console.log(666, props);
    const modelRef = ref({});
    const [registerRecordTable, { reload }] = useTable({
      api: GetOperateRecordPage,
      columns: recordColumns,
      useSearchForm: false,
      showTableSetting: false,
      showIndexColumn: false,
      striped: false,
      rowKey: 'id',
      scroll: { y: 330 },
      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action'
      },
      fetchSetting: { listField: 'records', totalField: 'total' },
      beforeFetch: (params) => {
        let newParams = {
          ...params,
          type: props.tabActiveKey,
        };
        return newParams;
      },
    });

    const [registerModal] = useModalInner((data) => {
      reload()
    });

    function handleCheck(record: any) {
      // 读取本地保存的html数据，使用新窗口打开
      window.localStorage.removeItem('callbackHTML');
      window.localStorage.setItem('callbackHTML', record.content)
      let newWin = window.open('')
      newWin.document.write(localStorage.getItem('callbackHTML'))
      newWin.document.close() // 关闭输出流
    }

    function handleVisibleChange(v) { }

    async function handleOk() { }
    return {
      registerModal,
      model: modelRef,
      handleCheck,
      registerRecordTable,
      handleVisibleChange,
      handleOk,
    };
  },
});
</script>

<style scoped lang="less">
:deep(.ant-table-wrapper) {
  padding: 0px !important;
}

:deep(.ant-spin-container) {
  height: 442px;
}

:deep(.scroll-container) {
  padding: 0 !important;
}

:deep(.ant-pagination-options-quick-jumper) {
  display: none;
}

:deep(.ant-table-body) {
  height: 330px !important;
  max-height: 696px !important;
}
</style>