vue 在线预览word和excel

yarn add @vue-office/excel @vue-office/docx

javascript 复制代码
<template>
  <div>
    <vue-office-docx
      :src="docx"
      style="height: 100%; margin: 0; padding: 0"
      @rendered="rendered"
    />
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";

export default {
  components: {
    VueOfficeDocx,
  },
  props: {
    docx: {
      type: String,
      default:
        "a.docx", //设置文档网络地址,可以是相对地址
    },
  },
  data() {
    return {};
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
  },
};
</script>
javascript 复制代码
<template>
  <vue-office-excel
    :src="excel"
    @rendered="renderedHandler"
    @error="errorHandler"
    style="height: calc(100vh - 90px)"
  />
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";

export default {
  components: {
    VueOfficeExcel,
  },
  props: {
    excel: {
      type: String,
      default:
        "a.xlsx", //设置文档地址
    },
  },
  data() {
    return {};
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
  },
};
</script>

也可以浏览器选择文件后直接预览,不需要文件是在线的

javascript 复制代码
<template>
	<div>
		<div v-if="extension === 'docx' || extension === 'doc'">
			<vue-office-docx :src="docx" style="height: 500px; margin: 0; padding: 0" />
		</div>
		<div v-if="extension === 'xlsx' || extension === 'xls'">
			<vue-office-excel :src="excel" style="height: 500px" />
		</div>
		<div v-if="extension === 'pdf'">
			<iframe v-if="pdfSrc" :src="pdfSrc" width="100%" height="500"></iframe>
		</div>
	</div>
</template>
<script lang="ts" name="cl-file-viewer" setup>
import { ref, watch } from "vue";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";

const props = defineProps({
	fileType: {
		type: String,
		default: "file"
	}, // 文件类型
	file: {
		type: Object,
		default: null
	} //文件流 或者文件地址
});

// 获取文件扩展名
const extension = ref("");
const docx = ref("");
const excel = ref("");
const pdfSrc:any = ref(null);

const readFile = async () => {
	// 获取选中的文件
	//@ts-ignore
	const file:any = props.fileType === "file" ? props.file : getFileStream(props.file);
	if (!file) {
		return;
	}

	// 获取文件扩展名
	extension.value = file.name.split(".").pop();

	// 根据文件扩展名进行处理
	switch (extension.value) {
		case "docx":
		case "doc":
			// 读取Word文件
			readWordFile(file);
			break;
		case "xlsx":
		case "xls":
			// 读取Excel文件
			readExcelFile(file);
			break;
		case "pdf":
			// 读取PDF文件
			readPdfFile(file);
			break;
		default:
			// 不支持的文件类型
			alert("Unsupported file type");
	}
};
const readWordFile = (file: any) => {
	docx.value = URL.createObjectURL(file);
};

const readExcelFile = (file: any) => {
	excel.value = URL.createObjectURL(file);
};

const readPdfFile = async (file: any) => {
	if (file) {
		// 判断传入的 file 参数是否为字符串类型
		if (props.file instanceof String) {
			// 如果是字符串类型,则将其赋值给 pdfSrc.value
			pdfSrc.value = props.file;
		} else {
			// 如果不是字符串类型,则使用 URL.createObjectURL 方法创建一个指向该文件的 URL,并将其赋值给 pdfSrc.value
			pdfSrc.value = URL.createObjectURL(file);
		}
	}
};

// url地址转发为文件流
const getFileStream = (url: string) => {
	return new Promise((resolve, reject) => {
		// 创建一个XMLHttpRequest对象
		const xhr = new XMLHttpRequest();
		// 设置请求方法为GET,并传入请求的URL
		xhr.open("GET", url);
		// 设置响应类型为blob,以便能够处理二进制数据
		xhr.responseType = "blob";
		// 当请求加载完成时,调用resolve方法并将响应数据作为参数传入
		xhr.onload = () => resolve(xhr.response);
		// 当请求发生错误时,调用reject方法并将错误信息作为参数传入
		xhr.onerror = (err) => reject(err);
	});
};

// 初始化
watch(
	() => props.file,
	(newValue, oldValue) => {
		if (newValue && newValue != oldValue) {
			nextTick(() => {
				readFile();
			});
		}
	},
	{ immediate: true }
);
</script>

参考链接

https://blog.csdn.net/qq_42038623/article/details/131600935

人工智能学习网站

https://chat.xutongbao.top

相关推荐
zhy8103022 分钟前
.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署
pdf·.net·excel
傻啦嘿哟10 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
木子020434 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
运维-大白同学1 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish3 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5413 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.3 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普3 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King3 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui