office文件 vue 预览_前端小功能：Word,PDF,Excel文档vue预览
前端小功能：Word,PDF,Excel文档vue预览
js-word文档预览。
如果你的文档都是公网可以访问的，可以用微软提供的在线预览
This is an embedded
Microsoft Office
document, powered by
Office Online
如果是本地文件，或者是内网文件则可以使用以下方法：
PDF示例：
npm install --save vue-pdf
PDF.vue
data(){return: {
pdfUrl:'',
}
}
created() {
const path= 'test.pdf'//你获取到的pdf路径
//pdf.createLoadingTask解决文件件跨域问题
this.pdfUrl =pdf.createLoadingTask(path)
},
}
Word示例：
npm install --save mammoth
mammoth.convertToHtml(input, options)
将源文档转换为 HTML。
input: 描述源文档的对象。 在 node.js 上，支持以下输入：
{path: path}，其中 path 是. docx 文件的路径。
{buffer: buffer}，其中 buffer 是包含. docx 文件的node.js 缓冲区。
在浏览器中，支持以下输入：
{arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 缓冲区。
options ( 可选): 转换的选项。
浏览器表示支持arrayBuffer
转换也仅仅支持docx
具体巧妙用法就请多自行去看文档。
Word.vue
data(){return: {
vHtml:'',
}
}
mounted() {
document.getElementById('document').addEventListener('change', this.uploading, false)
},
methods: {
uploading(event) {
const that= this
var file = event.target.files[0] //获取文件
var reader = newFileReader()
reader.readAsArrayBuffer(file)
reader.οnlοad= function(e) {
const buffer= e.target.result //此时是arraybuffer类型
mammoth.convertToHtml({ arrayBuffer: buffer }).then((result) =>{
console.log(result)
that.vHtml=result.value
}).done()
}
},
}
}
Excel示例
npm install --save xlsx
excel.vue
:data="tableData"style="width: 100%">
v-for="(value,key,index) in tableData[2]":key="index":prop="key":label="key">
data () {return{
tableData: [
{'接口大类': '基础信息','接口类别': '人防部门','接口类别ID': 'O2_001'},
{'接口大类': '基础信息','接口类别': '人防部门','接口类别ID': 'O2_001'}
],
card: [],
cardActive:'',
workbook: {}
}
},
watch: {
cardActive (ov, nv) {this.getTable(ov)
}
},
mounted () {this.readWorkbookFromRemoteFile('/static/o2.xlsx')
},
methods: {
readWorkbookFromRemoteFile:function(url) {var xhr = newXMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType= 'arraybuffer'let _this= thisxhr.οnlοad= function(e) {if (xhr.status === 200) {var data = newUint8Array(xhr.response)var workbook = XLSX.read(data, {type: 'array'})
console.log(workbook)var sheetNames = workbook.SheetNames //工作表名称集合
_this.workbook =workbook
_this.card=sheetNames
_this.cardActive= sheetNames[0]
_this.getTable(sheetNames[0])
}
}
xhr.send()
},
getTable (sheetName) {
console.log(111111111111)
console.log(sheetName)var worksheet = this.workbook.Sheets[sheetName]this.tableData =XLSX.utils.sheet_to_json(worksheet)
console.log(this.tableData)
}
}
}
font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
border 1px solid #ebebeb
padding 20px
width80%margin 20px auto
border-shadow 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5)
border-radius 10px
overflow scroll
height100%.tab
margin0 0 20px 0display flex
flex-direction row
background-color:#409EFF
}
span{
background-color:red
}
注: 文档使用绝对路径的时候，先解决跨域的问题。
没有终点，没有彼岸，坚持就好，愿岁月如初