Vue文档预览的几种方式

文章目录

一、 pdf预览
- 1、在页面上预览pdf文件
- - 1.1、单页面pdf可以直接使用
  - 1.2、多页pdf使用
- 2、在浏览器中打开一个新页面来显示pdf文件
二、docx文档预览
- 1、在页面上查看docx文件
- - 1.1、下载并引入docx-preview库。
  - 1.2、创建ref属性的元素用于docx文件的预览。
  - 1.3、获取docx的文件流并渲染到页面上
二、xlsx文档预览
- 1、在页面上查看xlsx文件
- - 1.1、下载并引入luckyexcel库。
  - 1.2、创建ref属性的元素用于docx文件的预览。
  - 1.3、获取xlsx的文件流并渲染到页面上

一、 pdf预览

1、下载所需的依赖项
 cnpm install vue-pdf
 // 因为使用npm的情况下会显示报错,所以改成了使用cnpm下载依赖
2、并在页面上导入pdf，并在components上注册
import pdf from "vue-pdf";
 components: {
    pdf,
  },

如果使用插件，出现如下错误的情况下，就使用下面的方法，如果没报错，就正常使用即可
Cannot read properties of undefined
"TypeError: Cannot read properties of undefined (reading 'catch')"或者是"TypeError: undefined is not an Object (evaluating 'pdfRender.camcel().catch')"
在node_modules/vue-pdf/src/pdfjsWrapper.js文件下修改

// 原代码
	pdfRender.cancel().catch(function(err) {
		emitEvent('error', err);
	});
// 修改为
	pdfRender.cancel();
	pdfRender.promise.catch(function(err) {
		emitEvent('error', err);
	});

在这里插入图片描述

1、在页面上预览pdf文件

1.1、单页面pdf可以直接使用

// 使用自己的pdf预览地址
<pdf
    :src="http://127.0.0.1:32000/upload/download/${file.name}">
</pdf>

1.2、多页pdf使用

在这里插入图片描述
代码

 <template>
 	<!--点击handlePreview事件后，pdf页面显示-->
 	<span class="el-icon-edit-outline" @click="handlePreview(file)"></span>
 	<!--num-pages事件是由vue-pdf库提供的，用于在pdf加载完成后传递总页数。-->
 	<!--@num-pages="handleNumPages"是一个事件监听器，用于在pdf组件触发num-pages事件时调用handleNumPages方法-->
 	<pdf :src="pdfUrl" :page="currentPage" @num-pages="handleNumPages"></pdf>
 	<!--这个地方使用了v-if指令来确保pdf加载完成后再显示总页数。-->
 	<p v-if="numPages !== 0">总页数: {{ numPages }}</p>
 	<!--PDF预览中添加上一页和下一页的功能,并设置第一页前和最后一页后不能点击-->
 	<el-button @click="previousPages" :disabled="currentPage === 1">上一页</el-button>
 	<el-button @click="nextPages" :disabled="currentPage === numPages">下一页</el-button>
 <template>
<script>
import pdf from "vue-pdf";
export default {
	data() {
		pdfUrl:"",
		currentPage: 1, // 当前页码
      	numPages: 0,// 设置总页码
	},
	components: {
    	pdf,
   },
   methods:{
   	handlePreview(file){
   		//替换为实际的文档URL
   		this.pdfUrl = `http://127.0.0.1:32000/upload/download/${file.name}`;
   	},
   	// 获取页码总数
   	handleNumPages(numPages) {
    	this.numPages = numPages;
    },
   	// 点击之后页面切换为上一页
   	previousPages(){
   		this.currentPage--;
   	},
   	// 点击之后页面切换为上一页
   	nextPages(){
   		this.currentPage++
   	}
  }
}
</script>

2、在浏览器中打开一个新页面来显示pdf文件

<template>
  <div>
    <span class="el-icon-edit-outline" @click="handlePreview(file)"></span>
  </div>
</template>

<script>
export default {
  methods: {
    handlePreview(file){
   		//替换为实际的文档URL
   		const pdfUrl = `http://127.0.0.1:32000/upload/download/${file.name}`;
   		//pdfUrl是当前页面的pdf文件的URL,第二个参数'_blank'表示在新窗口中打开。
   		window.open(pdfUrl, '_blank');
   	},
  }
};
</script>

在这里插入图片描述

二、docx文档预览

1、在页面上查看docx文件

docx预览会使用 docx-preview（不支持 doc ）
效果图：

1.1、下载并引入docx-preview库。

//1、 下载docx-preview依赖
npm install docx-preview
//2、 导入
const docx = require("docx-preview");

1.2、创建ref属性的元素用于docx文件的预览。

<div ref="file"></div>

1.3、获取docx的文件流并渲染到页面上

  axios({
          method: "get",
          responseType: "blob", // 因为是流文件，所以要指定blob类型
          url: `http://127.0.0.1:32000/upload/download/${file.name}`, // 自己的服务器，提供的预览文件接口
        }).then(({ data }) => {
        //data 返回的是流文件
          docx.renderAsync(data, this.$refs.file); //docx.renderAsync方法将docx文件渲染到页面上=
        });

如果在使用docx-preview时碰到一个关于源码的问题，可以试一下这样解决（写这份代码的时候，没有遇到。但是其他项目遇到过，只不过目前还没有复现出来，等遇到在来补充，先说一下怎么解决）
1、在public下的index.html中添加一下配置文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= BASE_URL %>static/config.js"></script>
    <!--------docx-preview配置文件--------->
    <script src="./docxPreview/polyfill.min.js"></script>
    <script src="./docxPreview/jszip.min.js"></script>
    <script src="./docxPreview/docx-preview.min.js"></script>
    <script src="./docxPreview/docx-preview.min.js.map"></script>

  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、在相应的位置添加github地址中的中相对应的文件
git地址：https://gitee.com/cloud132/docx-xlsx/tree/master/docxPreview
在这里插入图片描述

二、xlsx文档预览

1、在页面上查看xlsx文件

xlsx预览会使用 luckyexcel（不支持xls格式 ）
效果图：

1.1、下载并引入luckyexcel库。

//1、 下载luckyexcel依赖
npm install luckyexcel
//2、 导入luckyexcel
import LuckyExcel from 'luckyexcel';

1.2、创建ref属性的元素用于docx文件的预览。

<div id="luckysheet"></div>

1.3、获取xlsx的文件流并渲染到页面上

   	axios.get(`http://127.0.0.1:32000/upload/download/${file.name}`, {
   		responseType: "blob",
   	}).then((data) => {
   		LuckyExcel.transformExcelToLucky(data.data, (exportJson, luckysheetfile) => {
   			// 重新创建新表格
         	luckysheet.create({
         		container: "luckysheet", // 设定DOM容器的id
                title: "luckysheet", // 表头名
                lang: "zh", // 中文
                plugins: ["chart"],
                showinfobar: false, // 是否显示顶部信息栏
                // showstatisticBar: false, // 是否显示底部计数栏
                // allowEdit: false, // 是否允许前台编辑
                enableAddRow: false, // 是否允许增加行
                enableAddCol: false, // 是否允许增加列
                data: exportJson.sheets, // 表格内容
              });
            });
          })

使用luckyexcel插件保存后出现这个错误时，使用以下解决方案(如果没有报错就不需要)
在这里插入图片描述
1、在public下的index.html中引入相关配置文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= BASE_URL %>static/config.js"></script>
    <!---------luckyexcel 配置文件-------->
    <link rel="stylesheet" href="./luckyexcelConfig/pluginsCss.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/plugins.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/luckysheet.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/iconfont.css" />
    <script src="./luckyexcelConfig/plugin.js"></script>
    <script src="./luckyexcelConfig/luckysheet.umd.js"></script>
    <script src="./luckyexcelConfig/luckysheet.umd.js.map"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、在相应的位置添加github地址中的中相对应的文件
git地址：https://gitee.com/cloud132/docx-xlsx/tree/master/luckyexcelConfig
在这里插入图片描述

Vue文档预览的几种方式

文章目录

一、 pdf预览

1、在页面上预览pdf文件

1.1、单页面pdf可以直接使用

1.2、多页pdf使用

2、在浏览器中打开一个新页面来显示pdf文件

二、docx文档预览

1、在页面上查看docx文件

1.1、 下载并引入docx-preview库。

1.2、创建ref属性的元素用于docx文件的预览。

1.3、获取docx的文件流并渲染到页面上

二、xlsx文档预览

1、在页面上查看xlsx文件

1.1、 下载并引入luckyexcel库。

1.2、创建ref属性的元素用于docx文件的预览。

1.3、获取xlsx的文件流并渲染到页面上

1.1、下载并引入docx-preview库。

1.1、下载并引入luckyexcel库。