feat:帮助中心预览pdf文件

张含笑

2025-06-30 9099625af3f64c345ae953ae3d1c99fbdda2d3e8

feat:帮助中心预览pdf文件

 src/views/system/helpCenter.vue

@@ -22,7 +22,7 @@
            <el-upload
              style="display: inline-block"
              :show-file-list="false"
               :before-upload="(file) => onUploadFileBefore(file, scope.row)"
              :before-upload="file => onUploadFileBefore(file, scope.row)"
              :limit="1"
              accept=".pdf"
            >
@@ -41,9 +41,9 @@
import { computed, onMounted } from 'vue';
const helpData = ref([]);

import { useStore } from 'vuex'
import { useStore } from 'vuex';
const store = useStore();
const  permission = computed(() => store.state.user.permission);
const permission = computed(() => store.state.user.permission);
// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 1) {
@@ -55,39 +55,44 @@
const getlistDataAPI = () => {
  listDataAPI().then(res => {
    helpData.value = res.data.data;
 
  });
};
// 查看
const clickDetail = (val) => {
  const filePath = val.filePath
   if (!val.filePath) {
const clickDetail = row => {

  if (!row.filePath) {
    ElMessage.warning('没有可预览的文件');
    return;
  }
  window.open(filePath, '_blank');
  fetch(row.filePath)
        .then((response) => response.blob())
        .then((res) => {
          let blob = new Blob([res], { type: "application/pdf" });
          // pdfurl即转化后的结果
          let pdfurl = window.URL.createObjectURL(blob);
          // 新标签页打开，即可预览并下载
          window.open(pdfurl);
        });
 
};
// 文件上传
const onUploadFileBefore = (file,row) => {

const params={
  id:row.id,
  filePath:row.filePath
}
const onUploadFileBefore = (file, row) => {
  const fileFormat = file.name?.split('.')[1];
  if (fileFormat !== 'pdf') return ElMessage.error('请上传pdf格式的文件');
  const formData = new FormData();
  formData.append('file', file, file.name);
  uploadFileAPI(formData).then(res => {
  console.log('更新',res);
  
    if (res.data.code === 200) {
      const params = {
        id: row.id,
        filePath: res.data.data.link,
      };
      ElMessage.success('上传成功');
      updataDataAPI(params)
      updataDataAPI(params);
    } else {
      ElMessage.error('上传失败');
    }
     getlistDataAPI();
    getlistDataAPI();
  });
};
onMounted(() => {