doc、slx、pdf需要使用插件
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi
下载后在文件内引入
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
在页面使用
<template>
<vue-office-docx :src="url" />
<vue-office-excel :src="url" />
<vue-office-pdf :src="url" />
</template>
//url 是后端返回来的文件url路径
下3图展示 doc xls pdf 展示效果
如果嫌弃文件太多,也可以使用vue动态组件
<component :is="currentComponent" :src="previewUrl" ></component>
//currentComponent 是动态文件名,可以是vue-office-docx、vue-office-excel、vue-office-pdf
//previewUrl 是后端返回来的文件url路径
txt文本显示我使用<iframe>标签
<iframe :src="previewTxtUrl" frameborder="0" width="100%" height="600"></iframe>
//previewTxtUrl txt文件后端url路径
下图为展示效果(出现乱码是因为编码格式,如果使用谷歌浏览器预览utf-8会出现乱码,ansi正常显示)
下面的写法谷歌浏览器可以正常显示utf-8,但是ansi编码格式的会变成乱码
<iframe frameborder="0" id="myframe" width="100%" height="500"></iframe>
//下面为js代码
fetch('url地址')
.then(response => response.text())
.then(text => {
var iframeDocument = document.getElementById('myframe').contentDocument || document.getElementById('myframe').contentWindow.document;
iframeDocument.open();
iframeDocument.write(text);
iframeDocument.close();
});
图片的预览我直接用的<img>标签
<img :src="previewUrl" alt="" style="width: 100%;">
//previewUrl 图片路径地址
接下来是下载
doc、xls是可以直接使用window.open('url地址')
window.open('url地址');
下载txt代码
//如果axios没挂载到vue原型上需要引入一下
import axios from 'axios'
downloadTxt(){
//如果axios没挂载到vue原型上需要引入一下,挂在了就用this.$axios
axios.get('url文件路径', {
responseType: 'blob' // 得到文件流
}).then((response) => {
// console.log(response)
// 创建一个Blob对象,包含文本内容
const blob = new Blob([response.data], { type: 'application/;charset=utf-8' })
// 创建一个临时的a标签用于下载
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = '下载后的文件名'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
})
},
下载pdf代码
downloadPdf(){
fetch('下载文件url地址')
.then((response) => response.blob())
.then((blob) => {
// 创建一个临时的URL对象
const url = URL.createObjectURL(blob);
// 创建一个隐藏的<a>标签,并设置其href属性为临时URL
const a = document.createElement('a');
a.href = url;
a.download = '下载后的文件名'; // 设置下载的文件名
a.style.display = 'none';
// 将<a>标签添加到文档中,并模拟点击下载
document.body.appendChild(a);
a.click();
// 下载完成后,移除<a>标签和临时URL对象
document.body.removeChild(a);
URL.revokeObjectURL(url);
})
.catch((error) => {
console.error('下载文件时出错:', error);
});
},
下载图片
//调用下载
this.downloadByBlob('文件下载地址','文件名')
// 下载图片
downloadByBlob(url, name) {
let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = url
image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob)
this.download(url, name)
// 用完释放URL对象
URL.revokeObjectURL(url)
})
}
},
download(href, name) {
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.href = href
eleLink.click()
eleLink.remove()
},