Implementación frontal de la función de vista previa de archivos
❝Requisitos: Realice una función de vista previa en línea de pdf, excel, word, imágenes y otros archivos.
❞
Introducción: admite pdf, xlsx, docx, jpg, png, jpeg.
Lo siguiente usa código Vue3 para implementar todas las funciones. Se recomienda que las siguientes etiquetas de archivo de vista previa se puedan envolver con una ventana emergente en la capa exterior.
Vista previa de la imagen
La etiqueta iframe puede incrustar otra página HTML en la página actual, y nuestras imágenes también se pueden mostrar usando la etiqueta iframe.
<iframe :src="图片地址"
style="z-index: 1000; height:650px; width: 100%; margin: 0 auto"
sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups"
>
El atributo "sandbox" se puede omitir si se trata de una imagen de vista previa simple. Este atributo permite algunas restricciones adicionales en el contenido representado en el marco iframe. El valor de la propiedad puede ser una cadena vacía (en cuyo caso se habilitan todas las restricciones) o una serie de cadenas especificadas separadas por espacios.
-
allow-scripts: permite que el contexto de navegación incrustado ejecute scripts (pero no cree ventanas emergentes). Si no se utiliza esta palabra clave, el script no se puede ejecutar. -
allow-top-navigation: permite hipervínculos en páginas cargadas dentro de un marco para navegar a la ventana principal -
allow-same-popups: Permitir ventanas emergentes (por ejemplo, window.open, target="_blank"). Si no se utiliza esta palabra clave, la función correspondiente se desactivará automáticamente. -
allow-same-origin: si no se usa esta palabra clave, el contexto de navegación incrustado se tratará como si viniera de un origen diferente, lo que fallará en la verificación de la política del mismo origen. Si se utiliza este atributo, la página actual y la página abierta por el iframe se consideran del mismo origen.
vista previa del documento de Word (docx)
先下载npm包
npm i docx-preview --save
<div class="docxRef"></div>
<script>
import { renderAsync } from 'docx-preview';
function fn() {
// 这里的res.data是 blob文件流，如果自己的不是blob文件流
// 可以通过URL.createObjectURL(参数) 参数为File格式，转换为blob文件流
let blob = res.data
let childRef = document.getElementsByClassName('docxRef');
renderAsync(blob, childRef[0]) //渲染
}
fn()
</script>
"flujo de archivos blob"
Vista previa del archivo de Excel (xlsx)
下载包
npm install [email protected]
<div class="xlsxClass"></div>
const reader = new FileReader();
//通过readAsArrayBuffer将blob转换为ArrayBuffer对
reader.readAsArrayBuffer(res.data) // 这里的res.data是blob文件流
reader.onload = (event) => {
// 读取ArrayBuffer数据变成Uint8Array
var data = new Uint8Array(event.target.result);
// 这里的data里面的类型和后面的type类型要对应
var workbook = XLSX.read(data, { type: "array" });
var sheetNames = workbook.SheetNames; // 工作表名称
var worksheet = workbook.Sheets[sheetNames[0]];
// var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
let html = XLSX.utils.sheet_to_html(worksheet);
document.getElementsByClassName('xlsxClass')[0].innerHTML = html
};
vista previa en pdf
下载包 npm install pdfjs-dist
本例使用的是npm install [email protected]版本，以下例子使用的是vue3+vite创建的项目
以下例子通过canvas来渲染pdf
<template>
<div class="box">
<div class="tool-bar">
<div>{
{ pdfParams.pageNumber }} / {
{ pdfParams.total }}</div>
<button type="primary" :disabled="pdfParams.pageNumber == pdfParams.total" @click="nextPage">下一页
</button>
<button type="primary" :disabled="pdfParams.pageNumber == 1" @click="prevPage">上一页</button>
</div>
<canvas id="pdf-render"></canvas>
</div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
const pdfParams = reactive({
pageNumber: 1, // 当前页
total: 0, // 总页数
});
// 不要定义为ref或reactive格式，就定义为普通的变量
let pdfDoc = null;
// 这里必须使用异步去引用pdf文件，直接去import会报错，也不知道为什么
onMounted(async ()=> {
let pdfjs = await import('pdfjs-dist/build/pdf')
let pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry')
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
// 此文件位于public/test2.pdf
let url = ref('/test2.pdf')
pdfjs.getDocument(url.value).promise.then(doc => {
pdfDoc = doc
pdfParams.total = doc.numPages
getPdfPage(1)
})
})
// 加载pdf的某一页
const getPdfPage = (number) => {
pdfDoc.getPage(number).then(page => {
const viewport = page.getViewport()
const canvas = document.getElementById('pdf-render')
const context = canvas.getContext('2d')
canvas.width = viewport.viewBox[2]
canvas.height = viewport.viewBox[3]
viewport.width = viewport.viewBox[2]
viewport.height = viewport.viewBox[3]
canvas.style.width = Math.floor(viewport.width) + 'px'
canvas.style.height = Math.floor(viewport.height) + 'px'
let renderContext = {
canvasContext: context,
viewport: viewport,
// 这里transform的六个参数，使用的是transform中的Matrix(矩阵)
transform: [1, 0, 0, -1, 0, viewport.height]
}
// 进行渲染
page.render(renderContext)
})
}
// 下一页功能
const prevPage = () => {
if(pdfParams.pageNumber > 1) {
pdfParams.pageNumber -= 1
} else {
pdfParams.pageNumber = 1
}
getPdfPage(pdfParams.pageNumber)
}
// 上一页功能
const nextPage = () => {
if(pdfParams.pageNumber < pdfParams.total) {
pdfParams.pageNumber += 1
} else {
pdfParams.pageNumber = pdfParams.total
}
getPdfPage(pdfParams.pageNumber)
}
</script>
El código pdf anterior cita el artículo: (54 mensajes) vista previa de pdf frontal, uso de pdfjs_pdf.js_ignorant rookie's blog-CSDN blog
pdfjs código oficial: ejemplo (mozilla.github.io)
el código anterior no puede entender Puede verificar el código oficial en el área local, la mayoría de los cuales son fijos.
"Notas sobre lo anterior:"
-
¡Los archivos en pdf deben referenciarse de forma asíncrona! ! !
-
El archivo de demostración en pdf se encuentra en public/test2.pdf
-
transform: [1, 0, 0, -1, 0, viewport.height], usando Matrix en transform
-
Tanto la función de la página siguiente como la de la página anterior deben volver a representarse.