Tabla de contenido:
1. Pasos de implementación
2. Darse cuenta del efecto
¡El código es real y utilizable!
1. Pasos de implementación:
1. Usando vue y elementUI ,
Supongamos que existen estas variables: apego significa apego
-
datos
(
) {
-
volver
{
-
vista previa de diálogo
: falso ,
-
archivo adjunto
: '' ,
-
-
lista de archivos adjuntos
: [{
-
nombre
: 'ejemplo1.docx' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
nombre
: 'ejemplo2.pdf' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
nombre
: 'ejemplo3.txt' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
nombre
: 'ejemplo4.xlsx' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2. Código de página:
Utilice principalmente el componente iframe , la dirección src es la dirección del archivo que se mostrará
-
<!-- Este código es la visualización de la interfaz -->
-
< div v-for = "archivo adjunto en Lista de archivos adjuntos" >
-
< el-link :key = "archivo adjunto.ruta" :href = "archivo adjunto.ruta"
-
estilo
= "pantalla: bloque en línea;" tipo = "éxito" :subrayado = "falso" >
-
{
{ archivo adjunto.nombre }}
-
</el-enlace> _ _
-
< tipo de botón el = "texto" estilo = "display:inline-block;margin-left:30px;"
-
icon
= "el-icon-view" v-on:click = "previewFile(adjunto)" >
-
vista previa </el-button> _ _
-
</div> _ _
-
-
-
-
<!-- Haga clic en el botón de vista previa de arriba para abrir un cuadro de vista previa de archivo -->
-
< el-dialog :close-on-click-modal = "true" title = "File Preview" type = "primary"
-
:visible.sync
= "previewDialog" ancho = "80%" izquierda >
-
< iframe :src = "attachmentSrc" frameborder = "0" ancho = "100%" altura = "600" >
</ iframe >
-
< div slot = "pie de página" class = "dialog-footer" >
-
< tipo de botón el = "primary" v-on:click = "previewDialog = false" >
关闭</ el-button >
-
</div> _ _
-
</ el-diálogo >
3. Funciones en métodos:
Los archivos Word, xls , ppt deben usar la dirección de vista previa oficial de Microsoft
Nota: 1. La dirección del archivo debe estar en la red pública 2. Los recursos estáticos no tienen derechos de acceso
Al final, todo lo que controlas es la dirección src
Dirección de resolución de Microsoft: https://view.officeapps.live.com/op/view.aspx?src=su dirección de archivo
-
métodos
: {
-
// archivo de vista previa
-
previewFile
( archivo adjunto ) { // Mostrar el contenido de vista previa de acuerdo con el formato de archivo
-
const
fileExtension = archivo adjunto. camino _ división ( '.' ). estallar (). a Minúsculas ()
-
if
(extensión de archivo === 'xlsx' || extensión de archivo === 'docx' ) {
-
esto
_ adjuntoSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + archivo adjunto. camino
-
} más {
-
esto
_ archivo adjuntoSrc = archivo adjunto. camino
-
}
-
esto
_ vista previaDialog = verdadero
-
}
-
}
2. Date cuenta del efecto:
Interfaz de operación:
vista previa del archivo de Word:
vista previa del archivo de Excel;
Vista previa del archivo PDF:
Vista previa del archivo TXT:
Tabla de contenido:
1. Pasos de implementación
2. Darse cuenta del efecto
¡El código es real y utilizable!
1. Pasos de implementación:
1. Usando vue y elementUI ,
Supongamos que existen estas variables: apego significa apego
-
datos
(
) {
-
volver
{
-
vista previa de diálogo
: falso ,
-
archivo adjunto
: '' ,
-
-
lista de archivos adjuntos
: [{
-
nombre
: 'ejemplo1.docx' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example1.docx'
-
},
-
{
-
nombre
: 'ejemplo2.pdf' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
-
},
-
{
-
nombre
: 'ejemplo3.txt' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example3.txt'
-
},
-
{
-
nombre
: 'ejemplo4.xlsx' ,
-
ruta
: 'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
-
}]
-
}
-
}
2. Código de página:
Utilice principalmente el componente iframe , la dirección src es la dirección del archivo que se mostrará
-
<!-- Este código es la visualización de la interfaz -->
-
< div v-for = "archivo adjunto en Lista de archivos adjuntos" >
-
< el-link :key = "archivo adjunto.ruta" :href = "archivo adjunto.ruta"
-
estilo
= "pantalla: bloque en línea;" tipo = "éxito" :subrayado = "falso" >
-
{
{ archivo adjunto.nombre }}
-
</el-enlace> _ _
-
< tipo de botón el = "texto" estilo = "display:inline-block;margin-left:30px;"
-
icon
= "el-icon-view" v-on:click = "previewFile(adjunto)" >
-
vista previa </el-button> _ _
-
</div> _ _
-
-
-
-
<!-- Haga clic en el botón de vista previa de arriba para abrir un cuadro de vista previa de archivo -->
-
< el-dialog :close-on-click-modal = "true" title = "File Preview" type = "primary"
-
:visible.sync
= "previewDialog" ancho = "80%" izquierda >
-
< iframe :src = "attachmentSrc" frameborder = "0" ancho = "100%" altura = "600" >
</ iframe >
-
< div slot = "pie de página" class = "dialog-footer" >
-
< tipo de botón el = "primary" v-on:click = "previewDialog = false" >
关闭</ el-button >
-
</div> _ _
-
</ el-diálogo >
3. Funciones en métodos:
Los archivos Word, xls , ppt deben usar la dirección de vista previa oficial de Microsoft
Nota: 1. La dirección del archivo debe estar en la red pública 2. Los recursos estáticos no tienen derechos de acceso
Al final, todo lo que controlas es la dirección src
Dirección de resolución de Microsoft: https://view.officeapps.live.com/op/view.aspx?src=su dirección de archivo
-
métodos
: {
-
// archivo de vista previa
-
previewFile
( archivo adjunto ) { // Mostrar el contenido de vista previa de acuerdo con el formato de archivo
-
const
fileExtension = archivo adjunto. camino _ división ( '.' ). estallar (). a Minúsculas ()
-
if
(extensión de archivo === 'xlsx' || extensión de archivo === 'docx' ) {
-
esto
_ adjuntoSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + archivo adjunto. camino
-
} más {
-
esto
_ archivo adjuntoSrc = archivo adjunto. camino
-
}
-
esto
_ vista previaDialog = verdadero
-
}
-
}
2. Date cuenta del efecto:
Interfaz de operación:
vista previa del archivo de Word:
vista previa del archivo de Excel;
Vista previa del archivo PDF:
Vista previa del archivo TXT: