vue 实现word文档预览和下载
2023-06-30 本文已影响0人
云高风轻
1. 前言
- 之前写了篇文章是pdf 的预览和下载顺道就把 word文档的预览和下载也写了吧 反正都一样
2. 第三方插件实现
Office Web Viewer是 Microsoft 提供的一种在线预览 Office 文档的解决方案。通过将 Word 文档的 URL 设置为 Office Web Viewer 提供的链接，可以在网页中使用 Office Web Viewer 进行 Word 文档的预览- vue 代码
<template>
<div>
<iframe :src="webViewerUrl"></iframe>
</div>
</template>
<script setup>
import { ref } from 'vue';
const wordUrl = '/path/to/word.docx';
const webViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(wordUrl)}`;
</script>
<style scoped>
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
拼接Word 文档的URL到 Office Web Viewer 的链接中，生成一个可预览 Word 文档的链接。- 然后，将该链接设置为
<iframe>元素的src属性，实现 Word 文档的在线预览。
- Office Web Viewer 由 Microsoft 提供，预览的效果和支持的功能可能因版本和配置而异
3. iframe 实现
- 最简单的方式是使用 <iframe> 元素来加载 Word 文档，并在网页中进行预览。通过设置
iframe的src属性为Word文档的URL，可以将 Word 文档嵌入到页面中
2.代码
<template>
<div>
<iframe ref="wordViewer" :src="wordUrl"></iframe>
</div>
</template>
<script setup>
import { ref } from 'vue';
const wordUrl = '/path/to/word.docx';
const wordViewer = ref(null);
</script>
<style scoped>
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
下载
4. 使用 <a> 标签：
- 最简单的方式是使用 <a> 标签来创建一个下载链接，
- 将 Word 文档的 URL 设置为该链接的 href 属性。
- 用户点击链接时，浏览器会自动下载 Word 文档
<template>
<div>
<a :href="wordUrl" download="filename.docx">下载Word</a>
</div>
</template>
<script setup>
import { ref } from 'vue';
const wordUrl = '/path/to/word.docx';
</script>
5. 使用 JavaScript 下载：
- 如果你需要在用户执行某个操作后触发 Word 文档的下载，
- 可以使用 JavaScript 来实现文件下载功能。
- 这可以通过创建临时的 Blob 对象和使用 URL.createObjectURL() 方法来实现
<template>
<div>
<button @click="downloadWord">下载Word</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const wordUrl = '/path/to/word.docx';
const downloadWord = () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', wordUrl, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const blob = new Blob([xhr.response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'filename.docx';
link.click();
URL.revokeObjectURL(url);
}
};
xhr.send();
};
</script>
6. 服务端下载
- 前端通过调用后端接口来实现下载也是常用的方式
