东莞网站建设最牛,做营销网站设计,去菲律宾做it网站开发,做网站架构需要什么工具在我们工作时#xff0c;经常会有在线查看各种不同类型的文件的需要#xff0c;如Word文档、Excel表格、PowerPoint幻灯片和PDF等。可以直接在这里预览#xff1a;https://www.compdf.com/webviewer/demo
Word 文件实现前端预览
方案一#xff1a;
使用 XDOC 可以实现预…在我们工作时经常会有在线查看各种不同类型的文件的需要如Word文档、Excel表格、PowerPoint幻灯片和PDF等。可以直接在这里预览https://www.compdf.com/webviewer/demo
Word 文件实现前端预览
方案一
使用 XDOC 可以实现预览以 DataURI 表示的 word 文档此外 XDOC 还可以实现文本、带参数文本、html文本、json文本、公文等在线预览具体实现方法请看官方文档
下面是使用 XDOC 实现预览 DOCX 文档的代码示例
注意文档地址要用utf-8编码并且外网可访问
示例代码
window.open(https://view.xdocin.com/view?src encodeURIComponent(https://view.xdocin.com/demo/view.docx));方案二
使用 docx-preview 开源组件实现 word 文件预览 npm 安装 docx-preview 获取 word文档 blob 数据流 调用 docx-preview 提供的 renderAsync 方法并将获取的 blob 数据流传入方法中渲染word文档
示例代码
import Axios from axios;
import { renderAsync } from docx-preview;Axios.get(文档下载路径,{responseType: blob
}).then(({data}) {renderAsync(data, document.getElementById(container)) // 渲染到页面
})Excel 文件实现前端预览 使用 npm 命令安装库 npm i exceljs handsontable handsontable/vue 使用 exceljs 解析数据通过 workbook.getWorksheet 方法获取到每一个工作表的数据将数据处理成一个二维数组的数据 引入 handsontable/vue 的组件HotTable 通过settings属性将一些配置参数和二维数组数据传入组件渲染成excel样式实现预览
templateinput typefile hangehandleFile /hot-table :settingshotSettings/hot-table
/templatescript setupimport Excel from exceljs;import { HotTable } from handsontable/vue;import { ref } from vue;const data ref([]);const handleFile (e) {const file e.target.files[0];const workbook new Excel.Workbook();await workbook.xlsx.load(file)// 第一个工作表const worksheet workbook.getWorksheet(1);// 遍历工作表中的所有行包括空行data.value worksheet.getRows(1, worksheet.actualRowCount);})const hotSettings {language: zh-CN,readOnly: true,data: data.value,mergeCells: this.merge,colHeaders: true,rowHeaders: true,height: auto,outsideClickDeselects: false,licenseKey: non-commercial-and-evaluation}
/script
PowerPoint 文件实现前端预览
使用 jszip 和 pptxjs 实现 PowerPoint 文件预览
div idslide-resolte-contaniner /div script typetext/javascript src./js/jquery-1.11.3.min.js/script
script typetext/javascript src./js/jszip.min.js/script !-- v2.. , NOT v.3.. --
script typetext/javascript src./js/filereader.js/script !--https://github.com/meshesha/filereader.js --
script typetext/javascript src./js/d3.min.js/script !-- for charts graphs --
script typetext/javascript src./js/nv.d3.min.js/script !-- for charts graphs --
script typetext/javascript src./js/pptxjs.js/script
script typetext/javascript src./js/divs2slides.js/script !-- for slide show --script $(#slide-resolte-contaniner).pptxToHtml({ pptxFileUrl: Sample_demo1.pptx, slidesScale: 50%, slideMode: false, keyBoardShortCut: false });
/scriptPDF 文件实现前端预览
使用 ComPDFKit PDF SDK 实现 PDF 文件的在线预览
第一步添加 ComPDFKit PDF SDK 包 将 compdfkit 文件夹添加到项目的 根 目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件并将它导入到您的项目中。 将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。
第二步显示PDF文档 将 compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。 调用 ComPDFKitViewer.init() 在您的项目中初始化 ComPDFKit Web Viewer。 将要显示的 PDF 地址和许可证密钥传递给 init 函数
// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from /compdfkit/webviewer;
const viewer document.getElementById(webviewer);
ComPDFKitViewer.init({pdfUrl: Your PDF Url,license: Input your license here
}, viewer)
.then((core) {const docViewer core.docViewer;docViewer.addEvent(documentloaded, () {console.log(ComPDFKit Web Viewer loaded);})
})项目运行后您就可以看到要显示的 PDF 文件了。
