vue_pdf,word,excel,pptx等文件预览

2024-02-26 22:12

本文主要是介绍vue_pdf,word,excel,pptx等文件预览,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目背景:vue3+elementPlus+vite

1.pdf

1.1 iframe预览

+ '#toolbar=0' 拼接到src后,可隐藏iframe顶部的工具栏

<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><iframe :src="fileUrl+ '#toolbar=0'" frameborder="0"></iframe></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = file
}</script><style scoped lang="less">
.pdfobject-container {height: 680px;
}
</style>
1.2 pdfobject 插件
  • 安装及管网
    https://pdfobject.com/api/
    npm i pdfobject
  • 代码实现及配置
<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><div id="mypdf"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import PDFObject from 'pdfobject'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = filevar options = {pdfOpenParams: {scrollbars: "0",toolbar: "0",statusbar: "0",zoom: "100",view: "100%",fallbackLink: true,}, //禁用工具栏代码等一些配置};PDFObject.embed(fileUrl.value, '#mypdf', options)
}</script>
1.3 vue-office/pdf插件
  • 安装
    npm install @vue-office/pdf vue-demi
  • 使用
<template><div class="viewPDF.vue"><uploadFile @file="getFile" accept=".pdf,.PDF" ></uploadFile><vue-office-pdf :src="fileUrl"  style="height: 600px" /></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
import uploadFile from '@/components/uploadFile.vue'const fileUrl = ref('https://soft.xiaoz.org/office/hee%20hee.pdf')
function getFile(val: any) {let file = URL.createObjectURL(val.raw)fileUrl.value = file

这篇关于vue_pdf,word,excel,pptx等文件预览的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/750321

相关文章

Python进行JSON和Excel文件转换处理指南

《Python进行JSON和Excel文件转换处理指南》在数据交换与系统集成中,JSON与Excel是两种极为常见的数据格式,本文将介绍如何使用Python实现将JSON转换为格式化的Excel文件,... 目录将 jsON 导入为格式化 Excel将 Excel 导出为结构化 JSON处理嵌套 JSON:

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

Python操作PDF文档的主流库使用指南

《Python操作PDF文档的主流库使用指南》PDF因其跨平台、格式固定的特性成为文档交换的标准,然而,由于其复杂的内部结构,程序化操作PDF一直是个挑战,本文主要为大家整理了Python操作PD... 目录一、 基础操作1.PyPDF2 (及其继任者 pypdf)2.PyMuPDF / fitz3.Fre

kkFileView在线预览office的常见问题以及解决方案

《kkFileView在线预览office的常见问题以及解决方案》kkFileView在线预览Office常见问题包括base64编码配置、Office组件安装、乱码处理及水印添加,解决方案涉及版本适... 目录kkFileView在线预览office的常见问题1.base642.提示找不到OFFICE组件

Python实现PDF按页分割的技术指南

《Python实现PDF按页分割的技术指南》PDF文件处理是日常工作中的常见需求,特别是当我们需要将大型PDF文档拆分为多个部分时,下面我们就来看看如何使用Python创建一个灵活的PDF分割工具吧... 目录需求分析技术方案工具选择安装依赖完整代码实现使用说明基本用法示例命令输出示例技术亮点实际应用场景扩

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF