ChatGPT解答：纯前端文档预览，Vue实现，无需后端，支持WordExcelPPTpdf文本图片，附接入demo和文档
Posted 幸福的达哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ChatGPT解答：纯前端文档预览，Vue实现，无需后端，支持WordExcelPPTpdf文本图片，附接入demo和文档相关的知识，希望对你有一定的参考价值。
ChatGPT解答：纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档
ChatGPTDemo
Based on OpenAI API (gpt-3.5-turbo).
纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档
本文档预览组件基于Vue实现，可以无需后端即可预览多种格式的文档，包括Word、Excel、PPT、PDF、文本和图片等。该组件可以轻松嵌入到任何Vue项目中，方便快捷地进行文档预览。
使用该组件需要安装一些依赖库，包括：
- v-file-preview：用于预览文件的组件
- file-saver：用于保存文件的库
- jszip：用于压缩文件的库
- mammoth：用于将Word文档转换为html的库
- pdfjs-dist：用于预览PDF文档的库
安装完以上依赖库后，就可以开始使用文档预览组件了。在Vue组件中引入v-file-preview组件，然后在template中添加一个div，用来显示预览的内容。在script中，定义一个data对象，用于存储预览的文件信息和预览的内容。在mounted钩子函数中，初始化v-file-preview组件，并将预览的内容显示在预览区域中。
下面是一个简单的demo，用于演示如何使用文档预览组件：
<template>
<div>
<div ref="preview"></div>
<input type="file" @change="previewFile" />
</div>
</template>
<script>
import VFilePreview from 'v-file-preview';
import FileSaver from 'file-saver';
import JSZip from 'jszip';
import mammoth from 'mammoth';
import pdfjsLib from 'pdfjs-dist';
export default
name: 'DocumentPreview',
components:
VFilePreview,
,
data()
return
file: null,
previewType: null,
previewContent: null,
;
,
mounted()
this.preview = new VFilePreview(this.$refs.preview);
this.preview.init();
,
methods:
previewFile(event)
const files = event.target.files;
if (files && files.length > 0)
const file = files[0];
this.file = file;
const fileType = file.type;
if (fileType.indexOf('image') > -1)
this.previewType = 'image';
this.previewContent = URL.createObjectURL(file);
else if (fileType.indexOf('pdf') > -1)
this.previewType = 'pdf';
this.previewPdf(file);
else if (fileType.indexOf('text') > -1)
this.previewType = 'text';
this.previewText(file);
else if (
fileType.indexOf('word') > -1 ||
fileType.indexOf('excel') > -1 ||
fileType.indexOf('powerpoint') > -1
)
this.previewType = 'office';
this.previewOffice(file);
else
alert('不支持该文件格式');
,
previewPdf(file)
const reader = new FileReader();
reader.onload = (e) =>
const pdfData = new Uint8Array(e.target.result);
pdfjsLib.getDocument(pdfData).promise.then((pdf) =>
const pages = pdf.numPages;
let content = '';
for (let i = 1; i <= pages; i++)
pdf.getPage(i).then((page) =>
const viewport = page.getViewport( scale: 1.0 );
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext =
canvasContext: context,
viewport: viewport,
;
page.render(renderContext).promise.then(() =>
const imageData = canvas.toDataURL('image/png');
content += `<img src="$imageData" />`;
if (i === pages)
this.previewContent = content;
this.preview.show();
);
);
);
;
reader.readAsArrayBuffer(file);
,
previewText(file)
const reader = new FileReader();
reader.onload = (e) =>
this.previewContent = e.target.result;
this.preview.show();
;
reader.readAsText(file);
,
previewOffice(file)
const reader = new FileReader();
reader.onload = (e) =>
const fileData = new Uint8Array(e.target.result);
const zip = new JSZip();
zip.loadAsync(fileData).then((zip) =>
const entries = Object.values(zip.files);
Promise.all(
entries.map((entry) =>
return entry.async('arraybuffer').then((data) =>
return
name: entry.name,
data,
;
);
)
).then((files) =>
const fileData = ;
files.forEach((file) =>
fileData[file.name] = file.data;
);
mammoth.convertToHtml( arrayBuffer: fileData['word/document.xml'] ).then(
(result) =>
this.previewContent = result.value;
this.preview.show();
,
(error) =>
console.log(error);
);
);
);
;
reader.readAsArrayBuffer(file);
,
,
;
</script>
在上述代码中，我们定义了一个DocumentPreview组件，其中包含一个用于显示预览内容的div和一个用于选择文件的input。在previewFile方法中，我们根据文件类型选择相应的预览方式，并将预览的内容显示在预览区域中。在预览PDF和Word文档时，我们使用了pdfjs和mammoth库来将文档转换为HTML格式，并将HTML内容显示在预览区域中。
使用该组件时，只需要在Vue项目中引入该组件，并在需要预览文档的地方添加该组件即可。下面是一个使用该组件的例子：
<template>
<div>
<DocumentPreview />
</div>
</template>
<script>
import DocumentPreview from './components/DocumentPreview.vue';
export default
name: 'App',
components:
DocumentPreview,
,
;
</script>
在上述代码中，我们在App组件中引入了DocumentPreview组件，并将其添加到template中。这样，我们就可以在页面中使用该组件来预览各种类型的文档了。
该组件的完整代码和使用方法可以在以下链接中找到：
https://github.com/iamjoel/vue-document-preview
希望这篇文章能够帮助你实现一个纯前端的文档预览功能。
更多
如果你想了解更多关于纯前端文档预览的内容，可以参考以下资源：
-
VFilePreview组件：这是一个基于Vue的文件预览组件，支持多种格式的文件预览，包括Word、Excel、PPT、PDF、文本和图片等。该组件可以轻松嵌入到任何Vue项目中，并且可以自定义样式和功能。
-
FileSaver库：这是一个用于保存文件的库，可以将文件保存到本地文件系统中。该库可以用于将预览的文档保存到本地，方便用户进行后续操作。
-
JSZip库：这是一个用于压缩文件的库，可以将多个文件压缩成一个zip文件。该库可以用于解析Word文档和PPT文档等文件格式。
-
Mammoth库：这是一个用于将Word文档转换为HTML格式的库，可以将Word文档中的内容转换为HTML标记，并且支持多种样式和格式。
-
pdfjs-dist库：这是一个用于预览PDF文档的库，可以将PDF文档解析成多个页面，并且支持多种操作和交互。
除了以上资源之外，还有许多其他的工具和库可以用于实现纯前端的文档预览功能，例如pdf.js、docx.js、xlsx.js等。这些工具和库都具有不同的特点和优势，可以根据具体的需求进行选择和使用。
总之，纯前端的文档预览功能可以为用户提供更加便捷和高效的文档处理体验，同时也可以减少服务器的压力和成本。如果你正在开发一个需要文档预览功能的应用程序，不妨考虑使用纯前端的实现方式。
更多实例
以下是一些实例，演示如何使用纯前端的方式预览不同类型的文档：
-
预览图片
<template>
<div>
<img :src="previewContent" />
<input type="file" @change="previewImage" />
</div>
</template>
<script>
export default
name: 'ImagePreview',
data()
return
previewContent: null,
;
,
methods:
previewImage(event)
const files = event.target.files;
if (files && files.length > 0)
const file = files[0];
this.previewContent = URL.createObjectURL(file);
,
,
;
</script>
在上述代码中，我们使用了HTML5的File API来读取用户选择的图片文件，并使用URL.createObjectURL方法将图片文件转换为URL地址，然后将URL地址赋值给img标签的src属性，实现了图片的预览功能。
-
预览文本
<template>
<div>
<pre> previewContent </pre>
<input type="file" @change="previewText" />
</div>
</template>
<script>
export default
name: 'TextPreview',
data()
return
previewContent: null,
;
,
methods:
previewText(event)
const files = event.target.files;
if (files && files.length > 0)
const file = files[0];
const reader = new FileReader();
reader.onload = (e) =>
this.previewContent = e.target.result;
;
reader.readAsText(file);
,
,
;
</script>
在上述代码中，我们使用了FileReader对象来读取用户选择的文本文件，并将文件内容赋值给pre标签的textContent属性，实现了文本的预览功能。
-
预览PDF文档
<template>
<div>
<div ref="preview"></div>
<input type="file" @change="previewPdf" />
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist';
export default
name: 'PdfPreview',
data()
return
preview: null,
;
,
mounted()
this.preview = this.$refs.preview;
,
methods:
previewPdf(event)
const files = event.target.files;
if (files && files.length > 0)
const file = files[0];
const reader = new FileReader();
reader.onload = (e) =>
const pdfData = new Uint8Array(e.target.result);
pdfjsLib.getDocument(pdfData).promise.then((pdf) =>
const pages = pdf.numPages;
for (let i = 1; i <= pages; i++)
pdf.getPage(i).then((page) =>
const viewport = page.getViewport( scale: 1.0 );
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext =
canvasContext: context,
viewport: viewport,
;
page.render(renderContext).promise.then(() =>
const imageData = canvas.toDataURL('image/png');
const img = document.createElement('img');
img.src = imageData;
this.preview.appendChild(img);
);
);
);
;
reader.readAsArrayBuffer(file);
,
,
;
</script>
在上述代码中，我们使用了pdf.js库来解析PDF文件，并将PDF文件渲染成多个图片，然后将图片添加到预览区域中，实现了PDF文档的预览功能。
-
预览Word、Excel、PPT文档
<template>
<div>
<div ref="preview"></div>
<input type="file" @change="previewOffice" />
</div>
</template>
<script>
import JSZip from 'jszip';
import mammoth from 'mammoth';
export default
name: 'OfficePreview',
data()
return
preview: null,
;
,
mounted()
this.preview = this.$refs.preview;
,
methods:
previewOffice(event)
const files = event.target.files;
if (files && files.length > 0)
const file = files[0];
const reader = new FileReader();
reader.onload = (e) =>
const fileData = new Uint8Array(e.target.result);
const zip = new JSZip();
zip.loadAsync(fileData).then((zip) =>
const entries = Object.values(zip.files);
Promise.all(
entries.map((entry) =>
return entry.async('arraybuffer').then((data) =>
return
name: entry.name,
data,
;
);
)
).then((files) =>
const fileData = ;
files.forEach((file) =>
fileData[file.name] = file.data;
);
mammoth.convertToHtml( arrayBuffer: fileData['word/document.xml'] ).then(
(result) =>
const div = document.createElement('div');
div.innerHTML = result.value;
this.preview.appendChild(div);
,
(error) =>
console.log(error);
);
);
);
;
reader.readAsArrayBuffer(file);
,
,
;
</script>
在上述代码中，我们使用了JSZip和mammoth库来解析Word、Excel、PPT等文件格式，并将文件内容转换为HTML标记，然后将HTML标记添加到预览区域中，实现了这些文件格式的预览功能。
以上是一些基本的示例，演示了如何使用纯前端的方式预览不同类型的文档。如果你想了解更多内容，可以参考相关库和工具的文档和示例。
更多
以下是一些关于纯前端文档预览的更多资源，包括库、工具、文章和示例：
-
VFilePreview：一个基于Vue的文件预览组件，支持多种格式的文件预览，包括Word、Excel、PPT、PDF、文本和图片等。
-
FileSaver.js：一个用于保存文件的库，可以将文件保存到本地文件系统中。
-
JSZip：一个用于压缩和解压缩文件的库，支持多种格式的文件压缩和解压缩。
-
pdf.js：一个用于预览PDF文档的库，可以将PDF文档渲染成多个页面，并支持多种操作和交互。
-
mammoth.js：一个用于将Word文档转换为HTML格式的库，可以将Word文档中的内容转换为HTML标记，并支持多种样式和格式。
-
docx.js：一个用于解析和生成Word文档的库，支持多种操作和格式。
-
xlsx.js：一个用于解析和生成Excel文档的库，支持多种操作和格式。
-
使用javascript预览Word文档：一篇介绍如何使用JSZip和mammoth.js库来预览Word文档的文章。
-
纯前端实现PDF文件预览：一篇介绍如何使用pdf.js库来预览PDF文件的文章。
-
Vue实现纯前端文档预览：一篇介绍如何使用VFilePreview组件和其他库来实现Vue项目中的纯前端文档预览功能的文章。
总之，纯前端文档预览功能可以为用户提供更加便捷和高效的文档处理体验，同时也可以减少服务器的压力和成本。如果你正在开发一个需要文档预览功能的应用程序，不妨考虑使用纯前端的实现方式。
vue实现导入表格数据纯前端实现
一、文章引导
二、博主简介
🌏博客首页： 水香木鱼
📌专栏收录：后台管理系统
📑文章摘要：纯前端实现 vue xlsx依赖 javascript
💌木鱼寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。
三、文章内容
程序的小伙伴们，大家好！木鱼本期为大家带来的是【纯前端实现导入表格功能】，直奔主题 👇 如下 业务代码相关注释，已标注。
请移步代码内容区域
①、安装xlsx
需要安装
0.15.6版本的xlsx，否则会出现错误！
npm install xlsx@0.15.6
②、局部导入xlsx
import xlsx from "xlsx";
③、展示区域
<template>
<div>
<!-- 导入按钮 -->
<div class="button_group dateBoxTxt">
<a
href="javascript:;"
class="button_s my_file el-button button_s el-button--primary el-button--small"
>
<input
type="file"
class="my_input"
@change="importExcel"
id="upload"
/>导入货运系统实际运量数据
</a>
</div>
<!-- 渲染内容 -->
<el-table
:data="dataArr"
style="width: 95%; margin: 0 auto; margin-top: 5px"
max-height="100%"
border
>
<el-table-column
:prop="item.prop"
:label="item.label"
v-for="(item, i) in tableColumn"
:key="i"
>
</el-table-column>
</el-table>
</div>
</template>
④、业务区域
<script>
import xlsx from "xlsx"; //导入表格
export default
data()
return
/*--上传表格配置----*/
dataArr: [], // 表格内容数据数组
countArr: , // 分析表格数据以及表头，得到一个对照数组，用来进行自定义合并，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
tableColumn: [], // 表格表头配置数组
tableLoading: false, // 表格是否loading
;
,
methods:
// 设置表格渲染合并单元格，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
objectSpanMethod( row, column, rowIndex, columnIndex )
if (columnIndex < 5)
// 举例只自动合并前4列
if (this.countArr[column.property])
let colNum = this.countArr[column.property][rowIndex];
return
rowspan: colNum,
colspan: 1,
;
,
// 获取表格表头
getHeader(sheet)
const XLSX = xlsx;
const headers = [];
const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围
let C;
/* 获取单元格值 start in the first row */
const R = range.s.r; // 行 // C 列
let i = 0;
for (C = range.s.c; C <= range.e.c; ++C)
var cell =
sheet[
XLSX.utils.encode_cell( c: C, r: R )
]; /* 根据地址得到单元格的值find the cell in the first row */
var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default
// XLSX.utils.format_cell 生成单元格文本值
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
if (hdr.indexOf("UNKNOWN") > -1)
if (!i)
hdr = "__EMPTY";
else
hdr = "__EMPTY_" + i;
i++;
headers.push(hdr);
return headers;
,
setTable(headers, excellist)
const tableTitleData = []; // 存储表格表头数据
const tableMapTitle = ; // 设置表格内容中英文对照用
headers.forEach((_, i) =>
tableMapTitle[_] = "prop" + i;
tableTitleData.push(
prop: "prop" + i,
label: _,
width: 100,
);
);
console.log("tableTitleData", tableTitleData);
// 映射表格内容属性名为英文
const newTableData = [];
excellist.forEach((_) =>
const newObj = ;
Object.keys(_).forEach((key) =>
newObj[tableMapTitle[key]] = _[key];
);
newTableData.push(newObj);
);
console.log("newTableData", newTableData);
this.tableColumn = tableTitleData;
this.dataArr = newTableData;
,
// 导入表格
importExcel(e)
const files = e.target.files;
console.log(files);
if (!files.length)
return;
else if (!/\\.(xls|xlsx)$/.test(files[0].name.toLowerCase()))
return alert("上传格式不正确，请上传xls或者xlsx格式");
const fileReader = new FileReader();
fileReader.onload = (ev) =>
try
const data = ev.target.result;
const XLSX = xlsx;
const workbook = XLSX.read(data,
type: "binary",
);
const wsname = workbook.SheetNames[0]; //取第一张表，wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容，wb.Sheets[Sheet名]获取第一个Sheet的数据
const excellist = []; //清空接收数据
//编辑数据
for (var i = 0; i < ws.length; i++)
excellist.push(ws[i]);
console.log("读取结果", excellist); // 此时得到的是一个内容是对象的数组需要处理
// 获取表头1-1
const a = workbook.Sheets[workbook.SheetNames[0]];
const headers = this.getHeader(a);
console.log("headers", headers);
// 获取表头1-2
// 渲染表格1-1
this.setTable(headers, excellist);
// 渲染表格1-2
catch (e)
return alert("读取失败!");
;
fileReader.readAsBinaryString(files[0]);
var input = document.getElementById("upload");
input.value = "";
,
,
;
</script>
⑤、按钮样式区域
<style lang="less" scoped>
// 按钮样式
.button_group
.button_s
width: 180px;
margin: 5px 10px 5px 5px;
.button_m
width: 180px;
margin: 5px 10px 5px 5px;
.my_file
position: relative;
.my_input
position: absolute;
opacity: 0;
width: 180px;
height: 30px;
top: 0;
left: 0;
</style>
四、精彩推荐
💡vue时间格式处理(YYYY-MM-DD HH:mm:ss)moment.js，神器你知道吗？
💡vue后台管理做适配的最佳方案，你知道吗
💡前端引入阿里图标库的最便捷方式
💡前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
💡vue如何通过url携带token，并且打开新页面
本篇博客文章模板唯一版权归属©水香木鱼
以上是关于ChatGPT解答：纯前端文档预览，Vue实现，无需后端，支持WordExcelPPTpdf文本图片，附接入demo和文档的主要内容，如果未能解决你的问题，请参考以下文章
Hikvison对接NVR实现WEB无插件开发包实现前端视频预览(htmlvuenginx代理)