前端预览文件

import axios from "axios";

一、txt

<div id="txtPre" class="main-txt"></div>

let reader = new FileReader();
axios({
      method: "get",
      responseType: "blob",
      url: 地址,
}).then(({ data }) => {
      reader.readAsText(data);
});
reader.onload = function (e) {
      let txtData: any = document.getElementById("txtPre");
      txtData.innerHTML = e.target.result;
};

二、xlsx

npm i xlsx
import * as XLSX from "xlsx/xlsx.mjs"; //引入xlsx
<div class="csv-box">
    <el-tabs type="border-card">
      <el-tab-pane :label="item.name" v-for="item in state.excelSheetCsv" :key="item">
        <div class="table-csv" v-html="item.innerHTML"></div>
      </el-tab-pane>
    </el-tabs>
</div>
const state:any=reactive({
   excelSheetCsv: [], //xlsx
})
axios({
      method: "get",
      responseType: "arraybuffer",
      url: 地址,
    }).then((s) => {
      let data = new Uint8Array(s.data);
      let workbook = XLSX.read(data, {
        type: "array",
});
// 删除掉没有数据的sheet
Object.values(workbook.Sheets).forEach((sheet: any, index: any) => {
        if (Object.keys(sheet).indexOf("!ref") === -1) {
          delete workbook.Sheets[workbook.SheetNames[index]];
        }
});
      tableToHtml(workbook);
});
// 处理得到的csv数据
const tableToHtml = (workbook: any) => {
    let sheetList: any = workbook.SheetNames.filter(
      (v: any) => v.indexOf("数据源") === -1
    );
    sheetList.forEach((sheet: any) => {
      let worksheet = workbook.Sheets[sheet];
      if (worksheet) {
        let innerHTML = XLSX.utils.sheet_to_html(worksheet);
        state.excelSheetCsv.push({
          name: sheet,
          innerHTML: innerHTML,
        });
      } else {
        state.excelSheetCsv.push({
          name: sheet,
          innerHTML: "暂无数据",
        });
      }
    });
};

三、docx

npm i docx-preview
import { renderAsync } from "docx-preview";
<div ref="fileDocx" key="fileDocx" class="file-docx"></div>
let fileDocx=ref()
axios({
      method: "get",
      responseType: "blob",
      url: 地址,
    }).then(({ data }) => {
      renderAsync(data, fileDocx.value); // 渲染到页面
});

四、pdf

npm i pdfjs-dist@2.5.207
import * as pdfjs from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

<div class="pdf-content" >
      <canvas :id="`pdf-canvas-${state.currentNum}`" class="pdf-page" />
       <div class="total-style">
              <button class="btn" @click="changePdfPage(0)">上一页</button>
              <button class="btn" @click="changePdfPage(1)">下一页</button>
              <span>当前第{{ state.currentNum }}页/共{{ state.numPages }}页</span>
       </div>
</div>

const state:any=reactive({
   currentNum: 1, //当前页码
   numPages: 0, // pdf 总页数
   pdfCtx：null 
})

// pdf
const getPdf = (地址: any) => {
    let loadingTask = pdfjs.getDocument(地址);
    loadingTask.promise.then((pdf) => {
      state.pdfCtx = pdf;
      state.numPages = pdf._pdfInfo.numPages;
      nextTick(() => {
        renderPdf();
      });
    });
};
 // 渲染pdf
const renderPdf = () => {
    state.pdfCtx.getPage(state.currentNum).then((page) => {
      const canvas = document.getElementById(`pdf-canvas-${state.currentNum}`);
      const ctx = canvas.getContext("2d");
      const viewport = page.getViewport({ scale: 1 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvas.style.width = "950px";
      canvas.style.height = "650" * (viewport.height / viewport.width) + "px";
      page.render({
        canvasContext: ctx,
        viewport,
      });
    });
};
 // 分页
const changePdfPage = (val: any) => {
    if (val == 0 && state.currentNum > 1) {
      state.currentNum--;
      renderPdf();
    } else if (val == 1 && state.currentNum < state.numPages) {
      state.currentNum++;
      renderPdf();
    }
};