vue_pdf,word,excel,pptx等文件预览

作者：IT小白 | 2024-02-27 08:04:03

踩

项目背景：vue3+elementPlus+vite

1.pdf

1.1 iframe预览

+ '#toolbar=0' 拼接到src后，可隐藏iframe顶部的工具栏

<template>
  <div class="viewPDF.vue">
    <uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile>
    <iframe :src="fileUrl+ '#toolbar=0'" frameborder="0"></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'

const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  fileUrl.value = file
}

</script>

<style scoped lang="less">
.pdfobject-container {
  height: 680px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1.2 pdfobject 插件

安装及管网
https://pdfobject.com/api/
npm i pdfobject
代码实现及配置

<template>
  <div class="viewPDF.vue">
    <uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile>
    <div id="mypdf"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'

const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  fileUrl.value = file
  var options = {
    pdfOpenParams: {
      scrollbars: "0",
      toolbar: "0",
      statusbar: "0",
      zoom: "100",
      view: "100%",
      fallbackLink: true,
    }, //禁用工具栏代码等一些配置
  };
  PDFObject.embed(fileUrl.value, '#mypdf', options)
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.3 vue-office/pdf插件

安装
npm install @vue-office/pdf vue-demi
使用

<template>
  <div class="viewPDF.vue">
    <uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile>
    <vue-office-pdf :src="fileUrl"  style="height: 600px" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
import uploadFile from '@/components/uploadFile.vue'

const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  fileUrl.value = file
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. docx

2.1 vue-office/docx插件

安装
npm install @vue-office/docx vue-demi
使用

<template>
  <div class="viewPDF.vue">
    <uploadFile @file="getFile" accept=".doc,.docx" ></uploadFile>
   <vue-office-docx :src="docx" @rendered="rendered"/>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import uploadFile from '@/components/uploadFile.vue'

const docx= ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  docx.value = file
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上传doc后缀的文件，也能成功预览

3.excel

3.1 vue-office/excel插件

只能预览xlsx文件

安装
npm install @vue-office/excel vue-demi
使用

<template>
  <div class="viewPDF.vue">
    <uploadFile @file="getFile" accept=".doc,.docx" ></uploadFile>
   <vue-office-excel
    :src="excel"
    style="height: 600px"
    @rendered="renderedHandler"
    @error="errorHandler"
  />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import uploadFile from '@/components/uploadFile.vue'

const excel = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx')
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  excel.value = file
}
function renderedHandler() {
  console.log('渲染完成')
}
function errorHandler() {
  console.log('渲染失败')
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.2 xlsx插件

支持xlsx,xls文件的预览

安装
npm i xlsx@0.17.0
使用

<template>
      <div v-if="tableData.length>0" class="tab">
        <table class="table">
          <thead>
            <tr>
              <th v-for="header in tableHeaders" :key="header">{{ header }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in renderData" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
            </tr>
          </tbody>
        </table>
        <div class="btn">
          <div v-for="(item, index) in sheetName" @click="handleSheet(index)" :class="{isActive:activeIndex==index}">{{ item }}</div>
        </div>
      </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import XLSX from 'xlsx'
  
  defineExpose({handleFileUpload})
  const tableData = ref<any[]>([])
  const tableHeaders = ref<any[]>([])
  const renderData = ref()
  const sheetName = ref()
  function handleFileUpload(fileCurrent: any) {
    const file = fileCurrent
    if (file) {
      const reader = new FileReader()
      reader.onload = (e: any) => {
        console.log(e.target.result);
        
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        // 获取第一个工作表
        const sheetNameArr = workbook.SheetNames
        sheetName.value = sheetNameArr
        sheetNameArr.forEach((sheetName) => {
          tableData.value.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 })
          })
        })
        console.log(tableData.value)
        renderData.value = tableData.value[0].sheet
      }
  
      reader.readAsArrayBuffer(file)
    }
  }
  const activeIndex = ref(0)
  function handleSheet(index:number){
    activeIndex.value = index
    renderData.value = tableData.value[index].sheet
  }
  </script>
  
  <style scoped lang="less">
  .tab{
    height: calc(100% - 7px);
  }
 .table{
    height: calc(100% - 50px);
    overflow: auto;
    display:inline-block
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th,
  td,
  tr {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
    color:#0a0a0a
  }
  
  th {
    background-color: #f2f2f2;
  }
  .btn {
    text-align: left;
    background-color: #f5f6f7;
    display: flex;
    border: 1px solid #e8eaed;
    & > div {
      line-height: 40px;
      height: 40px;
      padding:4px 10px;
      vertical-align: middle;
      border-right: 1px solid #e8eaed;
      color: #000000a6;
      cursor: pointer;
      font-size: 14px;
    }
    .isActive{
      background-color: #fff;
    }
  }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

4.pptx

4.1 pptxjs插件

安装
pptxjs管网下载插件
将下载的内容(lib)放到public文件夹下
index.html中引入相关文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite</title>
    <link rel="stylesheet" href="/lib/css/pptxjs.css" />
    <link rel="stylesheet" href="/lib/css/nv.d3.min.css" />

    <script type="text/javascript" src="/lib/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/lib/js/jszip.min.js"></script>
    <script type="text/javascript" src="/lib/js/filereader.js"></script>
    <script type="text/javascript" src="/lib/js/d3.min.js"></script>
    <script type="text/javascript" src="/lib/js/nv.d3.min.js"></script>
    <script type="text/javascript" src="/lib/js/pptxjs.js"></script>
    <script type="text/javascript" src="/lib/js/divs2slides.js"></script>

    <script type="text/javascript" src="/lib/js/jquery.fullscreen-min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

vue文件中使用

<template>
  <div class="viewXls.vue">
    <uploadFile accept=".pptx,.PPTX"  @file="getFile"></uploadFile>
    <div ref="pptx" id="pptx"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const pptxUrl = ref()
const pptx = ref()
function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  pptxUrl.value = file+
  console.log( pptxUrl.value);
  // @ts-ignore
  $("#pptx").pptxToHtml({ 
      pptxFileUrl:  pptxUrl.value, //pptx文件地址
      slidesScale: "100%", 
  })
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5. 文本（csv,json,jsonl,md,txt,py等文本类型的文件）

读取文件内容相关方法：

import jschardet from 'jschardet'
//buffer转文字
export async function readText(buffer:any,fileType:string) {
    return new Promise((resolve, reject) => {
      const viewBuf = new Uint8Array(buffer);
      console.log(viewBuf,'viewBuf');
      let str = "";
      for (var index in viewBuf) {
        str += String.fromCharCode(viewBuf[index]);
        // @ts-ignore
        if (index >= 1000) {
          //考虑到效率，只取前1000个用于判断字符集
          break;
        }
      }
      // 判断编码方式的插件，使用上有问题，先写死了编码方式
    //   var codepage = jschardet.detect(str.substring(0, 1000)).encoding;
      let code = fileType=='text/csv'?'GB2312':'UTF-8'
      const reader = new FileReader();
      reader.onload = loadEvent => resolve(loadEvent.target!.result);
      reader.onerror = e => reject(e);
      reader.readAsText(new Blob([buffer]), code);
    });
  }
//文件转buffer
  export async function readBuffer(file:any) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = loadEvent => resolve(loadEvent.target!.result);
      reader.onerror = e => reject(e);
      reader.readAsArrayBuffer(file);
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vue文件中使用

<template>
 <pre>
    <span v-html="text" 
    style=" white-space: pre-wrap;
    word-wrap: break-word;">
    </span>
  </pre>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { readBuffer, readText } from "@/utils/renderFile";

const text = ref();
const fileType = ref("");
async function getFile(val: any) {
  let file = URL.createObjectURL(val.raw)
  fileType.value = val.raw.type;
  let blobFile = new Blob([val]);
    const buffer = await readBuffer(blobFile);
    text.value = await readText(buffer, fileType.value);
    console.log(text,'text');
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】