目錄：
????????一、實(shí)現(xiàn)步驟
????????二、實(shí)現(xiàn)效果
代碼真實(shí)可用！
一、實(shí)現(xiàn)步驟：
1、使用的是vue和elementUI，
假設(shè)有這些變量：attachment是附件的意思
-
data(
) {
-
return {
-
previewDialog:
false,
-
attachmentSrc:
'',
-
-
attachmentList: [{
-
name:
'example1.docx',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
name:
'example2.pdf',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
name:
'example3.txt',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
name:
'example4.xlsx',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2、頁(yè)面代碼：
主要是用 iframe 組件，src地址即為要展示的文件地址
-
<!-- 這段代碼是界面顯示 -->
-
<div v-for="attachment in attachmentList">
-
<el-link :key="attachment.path" :href="attachment.path"
-
style=
"display: inline-block;"
type=
"success"
:underline=
"false">
-
{{ attachment.name }}
-
</el-link>
-
<el-button type="text" style="display:inline-block;margin-left:30px;"
-
icon=
"el-icon-view"
v-on:click=
"previewFile(attachment)">
-
預(yù)覽
</el-button>
-
</div>
-
-
-
-
<!-- 點(diǎn)擊上面的預(yù)覽按鈕會(huì)彈出文件預(yù)覽框 -->
-
<el-dialog :close-on-click-modal="true" title="文件預(yù)覽" type="primary"
-
:visible.sync=
"previewDialog"
width=
"80%"
left>
-
<iframe :src="attachmentSrc" frameborder="0" width="100%" height="600">
</iframe>
-
<div slot="footer" class="dialog-footer">
-
<el-button type="primary" v-on:click="previewDialog = false">關(guān)閉
</el-button>
-
</div>
-
</el-dialog>
3、methods中的函數(shù)：
word、xls、ppt這些文件要用 微軟官方的預(yù)覽地址
注意：1. 文件地址必須公網(wǎng)；2. 靜態(tài)資源不要有訪問權(quán)限
最后，你控制的只是src地址
微軟解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
-
methods: {
-
// 預(yù)覽文件
-
previewFile(
attachment) {
// 根據(jù)文件格式顯示預(yù)覽內(nèi)容
-
const fileExtension = attachment.
path.
split(
'.').
pop().
toLowerCase()
-
if (fileExtension ===
'xlsx' || fileExtension ===
'docx') {
-
this.
attachmentSrc =
'https://view.officeapps.live.com/op/view.aspx?src=' + attachment.
path
-
}
else{
-
this.
attachmentSrc = attachment.
path
-
}
-
this.
previewDialog =
true
-
}
-
}
二、實(shí)現(xiàn)效果：
操作界面：
word文件預(yù)覽：
Excel文件預(yù)覽；
PDF文件預(yù)覽：
?TXT文件預(yù)覽：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-665687.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-665687.html
目錄：
????????一、實(shí)現(xiàn)步驟
????????二、實(shí)現(xiàn)效果
代碼真實(shí)可用！
一、實(shí)現(xiàn)步驟：
1、使用的是vue和elementUI，
假設(shè)有這些變量：attachment是附件的意思
-
data(
) {
-
return {
-
previewDialog:
false,
-
attachmentSrc:
'',
-
-
attachmentList: [{
-
name:
'example1.docx',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
name:
'example2.pdf',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
name:
'example3.txt',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
name:
'example4.xlsx',
-
path:
'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2、頁(yè)面代碼：
主要是用 iframe 組件，src地址即為要展示的文件地址
-
<!-- 這段代碼是界面顯示 -->
-
<div v-for="attachment in attachmentList">
-
<el-link :key="attachment.path" :href="attachment.path"
-
style=
"display: inline-block;"
type=
"success"
:underline=
"false">
-
{{ attachment.name }}
-
</el-link>
-
<el-button type="text" style="display:inline-block;margin-left:30px;"
-
icon=
"el-icon-view"
v-on:click=
"previewFile(attachment)">
-
預(yù)覽
</el-button>
-
</div>
-
-
-
-
<!-- 點(diǎn)擊上面的預(yù)覽按鈕會(huì)彈出文件預(yù)覽框 -->
-
<el-dialog :close-on-click-modal="true" title="文件預(yù)覽" type="primary"
-
:visible.sync=
"previewDialog"
width=
"80%"
left>
-
<iframe :src="attachmentSrc" frameborder="0" width="100%" height="600">
</iframe>
-
<div slot="footer" class="dialog-footer">
-
<el-button type="primary" v-on:click="previewDialog = false">關(guān)閉
</el-button>
-
</div>
-
</el-dialog>
3、methods中的函數(shù)：
word、xls、ppt這些文件要用 微軟官方的預(yù)覽地址
注意：1. 文件地址必須公網(wǎng)；2. 靜態(tài)資源不要有訪問權(quán)限
最后，你控制的只是src地址
微軟解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
-
methods: {
-
// 預(yù)覽文件
-
previewFile(
attachment) {
// 根據(jù)文件格式顯示預(yù)覽內(nèi)容
-
const fileExtension = attachment.
path.
split(
'.').
pop().
toLowerCase()
-
if (fileExtension ===
'xlsx' || fileExtension ===
'docx') {
-
this.
attachmentSrc =
'https://view.officeapps.live.com/op/view.aspx?src=' + attachment.
path
-
}
else{
-
this.
attachmentSrc = attachment.
path
-
}
-
this.
previewDialog =
true
-
}
-
}
二、實(shí)現(xiàn)效果：
操作界面：
word文件預(yù)覽：
Excel文件預(yù)覽；
PDF文件預(yù)覽：
?TXT文件預(yù)覽：
到了這里，關(guān)于Vue通過微軟官方鏈接預(yù)覽pptx docx xlsx的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
