prefacio
Debido a las necesidades comerciales, es necesario obtener una vista previa de muchos archivos en el front-end. Aprendamos sobre ellos hoy.
Sitio de demostración [1]: zhuye1993.github.io/file-view/d…
Plan de IMPLEMENTACION
Encontré una solución de implementación en línea, el efecto se ve bien, lo puse en la tabla a continuación, algunas de las cuales se pueden introducir y usar directamente en vue a través de npm.
| formato de documento | viejos componentes de código abierto | Alternativa a los componentes de código abierto |
|---|---|---|
| palabra (docx) | mamut | vista previa de docx (npm) |
| power point（pptx） | pptxjs | desarrollo de transformación pptxjs |
| sobresalir (xlsx) | sheetjs, tabla práctica | exceljs (npm) 、 handsontable (npm) (npm) |
| pdf (pdf) | pdfjs | pdfjs (npm) |
| imagen | jquery.verySimpleImageViewer | visor v (npm) |
archivo docx para lograr la vista previa de front-end
Código
- Primer npm i docx-vista previa
- Introducir el método renderAsync
- Pase el flujo de datos del blob al método para representar el documento de Word
import { defaultOptions, renderAsync } from "docx-preview";
renderAsync(buffer, document.getElementById("container"), null,
options: {
className: string = "docx", // 默认和文档样式类的类名/前缀
inWrapper: boolean = true, // 启用围绕文档内容渲染包装器
ignoreWidth: boolean = false, // 禁止页面渲染宽度
ignoreHeight: boolean = false, // 禁止页面渲染高度
ignoreFonts: boolean = false, // 禁止字体渲染
breakPages: boolean = true, // 在分页符上启用分页
ignoreLastRenderedPageBreak: boolean = true,//禁用lastRenderedPageBreak元素的分页
experimental: boolean = false, //启用实验性功能（制表符停止计算）
trimXmlDeclaration: boolean = true, //如果为真，xml声明将在解析之前从xml文档中删除
debug: boolean = false, // 启用额外的日志记录
}
);
复制代码
复制代码lograr efecto
imagen.png
pdf se da cuenta de la vista previa de front-end
Código
- Primero npm i pdfjs-dist
- Establecer la dirección de PDFJS.GlobalWorkerOptions.workerSrc
- Procese datos pdf a través de PDFJS.getDocument y devuelva un objeto pdfDoc
- Obtenga los datos de la página 1 por separado a través de pdfDoc.getPage
- Crea un elemento dom y establece la propiedad canvas del elemento.
- Renderice los datos en el lienzo a través del método page.render
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";
// 设置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
// data是一个ArrayBuffer格式，也是一个buffer流的数据
PDFJS.getDocument(data).promise.then(pdfDoc=>{
const numPages = pdfDoc.numPages; // pdf的总页数
// 获取第1页的数据
pdfDoc.getPage(1).then(page =>{
// 设置canvas相关的属性
const canvas = document.getElementById("the_canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
const ratio = dpr / bsr;
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;
canvas.style.width = viewport.width + "px";
canvas.style.height = viewport.height + "px";
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
const renderContext = {
canvasContext: ctx,
viewport: viewport,
};
// 数据渲染到canvas画布上
page.render(renderContext);
})
})
复制代码
复制代码lograr efecto
imagen.png
Excel realiza una vista previa de front-end
Código
- Descarga la biblioteca de exceljs, handsontable
- Leer datos del archivo a través de exceljs
- Obtenga los datos de cada hoja de trabajo a través del método workbook.getWorksheet y procese los datos en una matriz bidimensional de datos
- Presentar el componente HotTable de @handsontable/vue
- A través del atributo de configuración, algunos parámetros de configuración y datos de matriz bidimensional se pasan al componente, se representan en un estilo de Excel y se previsualizan.
// 加载excel的数据
（new ExcelJS.Workbook().xlsx.load(buffer)).then(workbook=>{
// 获取excel的第一页的数据
const ws = workbook.getWorksheet(1);
// 获取每一行的数据
const data = ws.getRows(1, ws.actualRowCount);
})
// 渲染页面
import { HotTable } from "@handsontable/vue";
<hot-table :settings="hotSettings"></hot-table>
hotSettings = {
language: "zh-CN",
readOnly: true,
data: this.data,
cell: this.cell,
mergeCells: this.merge,
colHeaders: true,
rowHeaders: true,
height: "calc(100vh - 107px)",
// contextMenu: true,
// manualRowMove: true,
// 关闭外部点击取消选中时间的行为
outsideClickDeselects: false,
// fillHandle: {
// direction: 'vertical',
// autoInsertRow: true
// },
// afterSelectionEnd: this.afterSelectionEnd,
// bindRowsWithHeaders: 'strict',
licenseKey: "non-commercial-and-evaluation"
}
复制代码
复制代码lograr efecto
imagen.png
Vista previa frontal de pptx
Principalmente a través de la biblioteca jszip, cargue el archivo binario y luego a través de una serie de procesamiento y conversión para lograr el efecto de vista previa, es más problemático de implementar, por lo que no pegaré el código.Si está interesado, puede descargar el código para ver.
lograr efecto
imagen.png
Resumir
Principalmente presenta la forma de obtener una vista previa de archivos de Word, Excel y PDF. El mejor efecto de obtener una vista previa de la interfaz es PDF, y no habrá problemas de caracteres ilegibles y caracteres ilegibles. Por lo tanto, la buena solución general es cooperar con el back-end para convertir archivos de diferentes formatos. Conviértalo a pdf, y luego realice el efecto de vista previa en el front-end, que conservará algunos efectos de estilo del archivo. Para la realización de imágenes y archivos txt, puede ver el código si estás interesado.
finalmente
Mira aquí, si este artículo te es útil, dale me gusta~
código de dirección
github.com/zhuye1993/f…[2]：github.com/zhuye1993/f…