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.iduploadDom.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.idtitle.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>