Vue项目 word,excel,pdf文件预览

2023-03-26 17:54| 来源: 网络整理| 查看: 265

方法一：最简单方便的方法

window.open(https://view.officeapps.live.com/op/view.aspx?src=***）是官网提供的方法

src 后面是你文档的地址或者是你下载的地址

注意：

1 要有域名 2 要在公网能连接到 3 最好不要有什么访问权限当然带参数是可以总结：文件必须是在外网服务器且可访问的。方法二：根据不同文件类型进行相对处理预览pdf文件方法一：通过后台返回链接直接用浏览器打开

window.open(url)

方法二：下载pdf插件

npm 下载 npm install --save vue-pdf

// 引入刚才下载的 pdf import pdf from 'vue-pdf'

页面中使用

复制代码预览excel文件(后端返回的excel文件流) 方法:使用sheetjs

$ npm install xlsx

页面引用预览成绩复制代码 import XLSX from 'xlsx' export default { data () { return { tableHtml: '', url: '', DialogVisible: false } }, methods: { // 获取后端返回的excel文件流 dealt: function (params) { const that = this const token = window.sessionStorage.getItem('token') //读取本地token var xhr = new XMLHttpRequest() const val = '?proId=' + params.programId + '&userId=' + params.userId //拼接请求参数，根据需求自定义 xhr.open('get', that.url + val, true) xhr.setRequestHeader('user-token', token) xhr.responseType = 'arraybuffer' xhr.onload = function (e) { if (xhr.status === 200) { var data = new Uint8Array(xhr.response) var workbook = XLSX.read(data, { type: 'array' }) that.tableToHtml(workbook) } } xhr.send() }, //预览excel文件 tableToHtml: function (workbook) { var worksheet = workbook.Sheets[workbook.SheetNames[0]] var innerHTML = XLSX.utils.sheet_to_html(worksheet) this.tableHtml = innerHTML this.DialogVisible = true } } } 复制代码 .table-html-wrap /deep/ table { border-right: 1px solid #e8eaec; border-bottom:1px solid #e8eaec; border-collapse: collapse; margin: auto; } .table-html-wrap /deep/ table td { border-left: 1px solid #e8eaec; border-top: 1px solid #e8eaec; white-space: wrap; text-align: left; min-width: 100px; padding: 4px; } 复制代码预览word文件

等待

【本文地址】

公司简介

联系我们