|
|
1.简单版本：url为文件下载地址,前提文件公共且公网
1.word官方预览链接（支持三种格式，部分word带特殊符号或流程图无法显示）
const routeUrl = file.url; // 文件路径
const url = encodeURIComponent(routeUrl);
const officeUrl = "https://view.xdocin.com/view?src=" + url;
2.office官方预览（pdf不能展示）
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
2.xlsx插件
想吃小鱼的猫：xlsx文件预览vue
1. npm i xlsx@0.16.0 --save (注意版本）
只适合简单预览，效果不好看不推荐！
2.npm i luckyexcel
3.word插件
npm i docx-preview --save
<template>
<div>
<el-button @click=&#34;goPreview&#34;>点击预览word文件</el-button>
<el-button @click=&#34;downLoad&#34;>点击下载word文件</el-button>
<div class=&#34;docWrap&#34;>
<!-- 预览文件的地方（用于渲染） -->
<div ref=&#34;file&#34;></div>
</div>
</div>
</template>
<script>
// 引入axios用来发请求
import axios from &#34;axios&#34;;
// 引入docx-preview插件
let docx = require(&#34;docx-preview&#34;);
export default {
mounted() {
console.log(&#34;使用插件的renderAsync方法来渲染&#34;, docx); //
},
methods: {
// 预览
goPreview() {
axios({
method: &#34;get&#34;,
responseType: &#34;blob&#34;, // 因为是流文件，所以要指定blob类型
url: &#34;http://ashuai.work:10000/getDoc&#34;, // 自己的服务器，提供的一个word下载文件接口
}).then(({ data }) => {
console.log(data); // 后端返回的是流文件
docx.renderAsync(data, this.$refs.file); // 渲染到页面
});
},
// 下载
downLoad() {
axios({
method: &#34;get&#34;,
responseType: &#34;blob&#34;, // 因为是流文件，所以要指定blob类型
url: &#34;&#34;, // 提供的一个word下载文件接口
}).then(({ data }) => {
console.log(data); // 后端返回的是流文件
const blob = new Blob([data]); // 把得到的结果用流对象转一下
var a = document.createElement(&#34;a&#34;); //创建一个<a></a>标签
a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
a.download = &#34;出师表.docx&#34;; //设置文件名
a.style.display = &#34;none&#34;; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
a.remove(); // 一次性的，用完就删除a标签
});
},
},
};
</script>
<style lang=&#34;less&#34; scoped>
.docWrap {
// 指定样式宽度
width: 900px;
overflow-x: auto;
}
</style>
4.pdf预览
下载js文件：http://mozilla.github.io/pdf.js/getting_started/#download
<div style=&#34;height:800px;&#34;>
<iframe :src=&#34;pdfSrc&#34; width=&#34;100%&#34; height=&#34;100%&#34;></iframe>
</div>
getSeePdf(file){
this.pdffile=file
let routeUrl = &#39;文件地址url&#39;;
let pSrc = routeUrl + &#39;?r=&#39; + new Date();
this.pdfSrc = &#39;static/pdf/web/viewer.html?file=&#39; + encodeURIComponent(pSrc) + &#39;.pdf&#39;;
}, |
|
发表于 2022-12-31 11:36:29