vue前端预览并下载doc、xls、pdf、txt及图片

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()
		},