Feat: Support preview of HTML files #5096 (#5134)

### What problem does this PR solve?

Feat: Support preview of HTML files #5096
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/document-viewer/index.tsx

@@ -6,6 +6,7 @@ import Docx from './docx';
 import Excel from './excel';
 import Pdf from './pdf';
 
+import { previewHtmlFile } from '@/utils/file-util';
 import styles from './index.less';
 
 // TODO: The interface returns an incorrect content-type for the SVG.
@@ -17,6 +18,11 @@ const DocumentViewer = () => {
   const prefix = currentQueryParameters.get('prefix');
   const api = `${api_host}/${prefix || 'file'}/get/${documentId}`;
 
+  if (ext === 'html' && documentId) {
+    previewHtmlFile(documentId);
+    return;
+  }
+
   return (
     <section className={styles.viewerWrapper}>
       {Images.includes(ext!) && (

web/src/services/file-manager-service.ts

@@ -1,7 +1,6 @@
 import api from '@/utils/api';
 import registerServer from '@/utils/register-server';
 import request from '@/utils/request';
-import pureRequest from 'axios';
 
 const {
   listFile,
@@ -67,45 +66,3 @@ const fileManagerService = registerServer<keyof typeof methods>(
 );
 
 export default fileManagerService;
-
-export const getDocumentFile = (documentId: string) => {
-  return pureRequest(getFile + '/' + documentId, {
-    responseType: 'blob',
-    method: 'get',
-    // headers: {
-    //   'content-type':
-    //     'text/plain;charset=UTF-8, application/vnd.openxmlformats-officeddocument.spreadsheetml.sheet;charset=UTF-8',
-    // },
-
-    // parseResponse: false,
-    // getResponse: true,
-  })
-    .then((res) => {
-      const x = res?.headers?.get('content-disposition');
-      const y = res?.headers?.get('Content-Type');
-      console.info(res);
-      console.info(x);
-      console.info('Content-Type', y);
-      return res;
-    })
-    .then((res) => {
-      // const objectURL = URL.createObjectURL(res);
-
-      // let btn = document.createElement('a');
-
-      // btn.download = '文件名.pdf';
-
-      // btn.href = objectURL;
-
-      // btn.click();
-
-      // URL.revokeObjectURL(objectURL);
-
-      // btn = null;
-
-      return res;
-    })
-    .catch((err) => {
-      console.info(err);
-    });
-};

web/src/utils/file-util.ts

@@ -98,6 +98,24 @@ export const getBase64FromUploadFileList = async (fileList?: UploadFile[]) => {
   return '';
 };
 
+async function fetchDocumentBlob(id: string, mimeType?: FileMimeType) {
+  const response = await fileManagerService.getDocumentFile({}, id);
+  const blob = new Blob([response.data], {
+    type: mimeType || response.data.type,
+  });
+
+  return blob;
+}
+
+export async function previewHtmlFile(id: string) {
+  const blob = await fetchDocumentBlob(id, FileMimeType.Html);
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
 export const downloadFileFromBlob = (blob: Blob, name?: string) => {
   const url = window.URL.createObjectURL(blob);
   const a = document.createElement('a');
@@ -116,8 +134,7 @@ export const downloadDocument = async ({
   id: string;
   filename?: string;
 }) => {
-  const response = await fileManagerService.getDocumentFile({}, id);
+  const blob = await fetchDocumentBlob(id);
-  const blob = new Blob([response.data], { type: response.data.type });
   downloadFileFromBlob(blob, filename);
 };