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. 服务端下载
- 前端通过调用后端接口来实现下载也是常用的方式
