文件预览

src/components/UploadFile/src/UploadFile.vue

@@ -35,9 +35,26 @@
       <template #file="row">
         <div class="flex items-center">
           <span>{{ row.file.name }}</span>
+          <div class="ml-10px" >
+            <el-link
+              :underline="false"
+              @click="handleView(row.file)"
+              target="_blank"
+              type="primary"
+            >编辑
+            </el-link>
+          </div>
+          <div class="ml-10px" >
+            <el-link
+            :underline="false"
+            @click="handleView(row.file)"
+            target="_blank"
+            type="primary"
+            >预览
+            </el-link>
+<!--            <i-frame :src="'https://view.officeapps.live.com/op/view.aspx?src='+encodeURIComponent(row.file.url)"/>-->
+          </div>
           <div class="ml-10px">
-<!--            :href="row.file.url"-->
-<!--            :download = "row.file.name"-->
             <el-link
               :underline="false"
               target="_blank"
@@ -139,14 +156,17 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
     emitUpdateModelValue()
   }
 }
+
 // 文件数超出提示
 const handleExceed: UploadProps['onExceed'] = (): void => {
   message.error(`上传文件数量不能超过${props.limit}个!`)
 }
+
 // 上传错误提示
 const excelUploadError: UploadProps['onError'] = (): void => {
   message.error('导入数据失败，请您重新上传！')
 }
+
 // 删除上传文件
 const handleRemove = (file: UploadFile) => {
   const index = fileList.value.map((f) => f.name).indexOf(file.name)
@@ -159,6 +179,25 @@ const handleRemove = (file: UploadFile) => {
     emitUpdateModelValue2()
   }
 }
+
+//文件预览
+const handleView =  (file)=> {
+  const url = file.url
+  if (!url) {
+    console.error("文件不可预览");
+  }
+  const file2 = url.substring(url.length-5,url.length).trim().toLowerCase()
+  console.log(file2)
+  //可以类似打开表单一样的去实现在表单里面使用类似于
+  // <i-frame :src="row.file.url" width="100%" height="100%"/>
+  if (file2==="docx"||file2==="xlsx"||file2==="pptx"){
+    window.open("https://view.officeapps.live.com/op/view.aspx?src="+encodeURIComponent(url),'_blank')
+  }else if(file2===".txt"||file2===".pdf"){
+    window.open(url, '_blank');
+  }
+}
+
+//文件下载时文件名为原来名字
 const downloadFile = async (file)=> {
   //使用 fetch API 请求文件并返回 Blob 数据
   const response = await fetch(file.url);
@@ -179,6 +218,7 @@ const downloadFile = async (file)=> {
   //下载完成后，释放创建的对象 URL，避免内存泄漏
   URL.revokeObjectURL(link.href);
 }
+
 const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
   console.log(uploadFile)
 }