Dachang Technology Advanced Front-end Nodo Avanzado
Haga clic en la guía de crecimiento del programador superior, preste atención al número público
Respuesta 1, únete al grupo de intercambio de nodos avanzado
prefacio
Debido a las necesidades comerciales, es necesario obtener una vista previa de muchos archivos en el front-end. Aprendamos sobre ellos hoy.
Demostración地址[1]：https://zhuye1993.github.io/file-view/dist/index.html
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
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
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
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
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.
código de dirección
github.com/zhuye1993/f…[2]：https://github.com/zhuye1993/file-view
Acerca de este artículo
Autor: Industria del Bambú
https://juejin.cn/post/7071598747519549454
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持❤️