Inhaltsverzeichnis:
1. Umsetzungsschritte
2. Erkennen Sie die Wirkung
Der Code ist echt und verwendbar!
1. Umsetzungsschritte:
1. Verwenden von vue und elementUI ,
Angenommen, es gibt diese Variablen: Bindung bedeutet Bindung
-
Daten
(
) {
-
zurück
{
-
VorschauDialog
:
falsch
,
-
attachmentSrc
:
''
,
-
-
Anhangsliste
: [{
-
Name
:
'example1.docx'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
Name
:
'Beispiel2.pdf'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
Name
:
'example3.txt'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
Name
:
'example4.xlsx'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2. Seitencode:
Verwenden Sie hauptsächlich die IFrame- Komponente. Die Quelladresse ist die Adresse der anzuzeigenden Datei
-
<!-- Dieser Code ist die Schnittstellenanzeige -->
-
< div v-for = "attachment in attachmentList" >
-
< el-link :key = "attachment.path" :href = "attachment.path"
-
Stil
=
„display: inline-block;“
Typ
=
"Erfolg"
:unterstreichen
=
„falsch“
>
-
{
{ Anhang.Name }}
-
</ el-link >
-
< el-button type = "text" style = "display:inline-block;margin-left:30px;"
-
Symbol
=
„el-icon-view“
v-on:click
=
„previewFile(attachment)“
>
-
Vorschau
</ el-button >
-
</ div >
-
-
-
-
<!-- Klicken Sie oben auf die Vorschau-Schaltfläche, um ein Dateivorschaufenster zu öffnen -->
-
< el-dialog :close-on-click-modal = „true“ title = „File Preview“ type = „primary“
-
:visible.sync
=
„previewDialog“
Breite
=
„80 %“
links
>
-
< iframe :src = "attachmentSrc" frameborder = "0" width = "100%" height = "600" >
</ iframe >
-
< div slots = "footer" class = "dialog-footer" >
-
< el-button type = "primary" v-on:click = "previewDialog = false" >
关闭
</ el-button >
-
</ div >
-
</ el-dialog >
3. Funktionen in Methoden:
Word-, XLS- und PPT-Dateien sollten die offizielle Vorschauadresse von Microsoft verwenden
Hinweis: 1. Die Dateiadresse muss sich im öffentlichen Netzwerk befinden; 2. Statische Ressourcen haben keine Zugriffsrechte
Letztendlich haben Sie nur die Kontrolle über die Quelladresse
Microsoft-Auflösungsadresse: https://view.officeapps.live.com/op/view.aspx?src=Ihre Dateiadresse
-
Methoden
: {
-
// Vorschaudatei
-
Vorschaudatei
(
Anhang
) {
// Zeigt den Vorschauinhalt entsprechend dem Dateiformat an
-
const
fileExtension = Anhang.
Pfad
.
teilen
(
'.'
).
pop
().
toLowerCase
()
-
if
(fileExtension ===
'xlsx'
|| Dateierweiterung ===
'docx'
) {
-
dies
.
attachmentSrc
=
'https://view.officeapps.live.com/op/view.aspx?src='
+ Anhang.
Weg
-
}
sonst
{
-
dies
.
attachmentSrc
= Anhang.
Weg
-
}
-
dies
.
VorschauDialog
=
WAHR
-
}
-
}
2. Erkennen Sie den Effekt:
Bedienoberfläche:
Vorschau der Word-Datei:
Vorschau der Excel-Datei;
Vorschau der PDF-Datei:
Vorschau der TXT-Datei:
Inhaltsverzeichnis:
1. Umsetzungsschritte
2. Erkennen Sie die Wirkung
Der Code ist echt und verwendbar!
1. Umsetzungsschritte:
1. Verwenden von vue und elementUI ,
Angenommen, es gibt diese Variablen: Bindung bedeutet Bindung
-
Daten
(
) {
-
zurück
{
-
VorschauDialog
:
falsch
,
-
attachmentSrc
:
''
,
-
-
Anhangsliste
: [{
-
Name
:
'example1.docx'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
Name
:
'Beispiel2.pdf'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
Name
:
'example3.txt'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
Name
:
'example4.xlsx'
,
-
Pfad
:
'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2. Seitencode:
Verwenden Sie hauptsächlich die IFrame- Komponente. Die Quelladresse ist die Adresse der anzuzeigenden Datei
-
<!-- Dieser Code ist die Schnittstellenanzeige -->
-
< div v-for = "attachment in attachmentList" >
-
< el-link :key = "attachment.path" :href = "attachment.path"
-
Stil
=
„display: inline-block;“
Typ
=
"Erfolg"
:unterstreichen
=
„falsch“
>
-
{
{ Anhang.Name }}
-
</ el-link >
-
< el-button type = "text" style = "display:inline-block;margin-left:30px;"
-
Symbol
=
„el-icon-view“
v-on:click
=
„previewFile(attachment)“
>
-
Vorschau
</ el-button >
-
</ div >
-
-
-
-
<!-- Klicken Sie oben auf die Vorschau-Schaltfläche, um ein Dateivorschaufenster zu öffnen -->
-
< el-dialog :close-on-click-modal = „true“ title = „File Preview“ type = „primary“
-
:visible.sync
=
„previewDialog“
Breite
=
„80 %“
links
>
-
< iframe :src = "attachmentSrc" frameborder = "0" width = "100%" height = "600" >
</ iframe >
-
< div slots = "footer" class = "dialog-footer" >
-
< el-button type = "primary" v-on:click = "previewDialog = false" >
关闭
</ el-button >
-
</ div >
-
</ el-dialog >
3. Funktionen in Methoden:
Word-, XLS- und PPT-Dateien sollten die offizielle Vorschauadresse von Microsoft verwenden
Hinweis: 1. Die Dateiadresse muss sich im öffentlichen Netzwerk befinden; 2. Statische Ressourcen haben keine Zugriffsrechte
Letztendlich haben Sie nur die Kontrolle über die Quelladresse
Microsoft-Auflösungsadresse: https://view.officeapps.live.com/op/view.aspx?src=Ihre Dateiadresse
-
Methoden
: {
-
// Vorschaudatei
-
Vorschaudatei
(
Anhang
) {
// Zeigt den Vorschauinhalt entsprechend dem Dateiformat an
-
const
fileExtension = Anhang.
Pfad
.
teilen
(
'.'
).
pop
().
toLowerCase
()
-
if
(fileExtension ===
'xlsx'
|| Dateierweiterung ===
'docx'
) {
-
dies
.
attachmentSrc
=
'https://view.officeapps.live.com/op/view.aspx?src='
+ Anhang.
Weg
-
}
sonst
{
-
dies
.
attachmentSrc
= Anhang.
Weg
-
}
-
dies
.
VorschauDialog
=
WAHR
-
}
-
}
2. Erkennen Sie den Effekt:
Bedienoberfläche:
Vorschau der Word-Datei:
Vorschau der Excel-Datei;
Vorschau der PDF-Datei:
Vorschau der TXT-Datei: