vue项目中实现doc/excel/pdf/txt/图片等文件的预览

vue项目中实现doc/excel/pdf/txt/图片等文件的预览

word预览

1. 使用vue-office-docx(只支持docx文件预览,不支持doc文件)

支持文档网络地址(https://***.docx)。
文件上传时预览,此时可以获取文件的ArrayBuffer或二进制文件预览Blob。

// docx文档预览组件
npm install @vue-office/docx vue-demi@0.13.11
// 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api/<template><vue-office-docx  :src="docx" style="height: 100vh;" @rendered="rendered" />
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

2. 使用docx-preview

npm install docx-preview
import { renderAsync } from 'docx-preview';
// 调用函数,解析docx文件
renderAsync(res.data, document.getElementById("preload_box"), null, {className: "docx", // 默认和文档样式类的类名/前缀inWrapper: true, // 启用围绕文档内容渲染包装器ignoreWidth: false, // 禁止页面渲染宽度ignoreHeight: false, // 禁止页面渲染高度ignoreFonts: false, // 禁止字体渲染breakPages: true, // 在分页符上启用分页ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页experimental: false, //启用实验性功能(制表符停止计算)trimXmlDeclaration: true, //如果为真,xml声明将在解析之前从xml文档中删除debug: false, // 启用额外的日志记录
})

3. 使用mammoth.js

npm install --save mammoth
import mammoth from “mammoth”;<div ref='docpreview'></div>
mammoth.convertToHtml({path: "path/to/document.docx"}).then(function(result){var html = result.value; // The generated HTMLthis.$refs.docpreview.innerHTML = html}).catch(function(error) {console.error(error);});

4. 使用微软的Office Web Viewer

使用iframe作为载体。
文件会传输到微软的服务器上,因此可能会涉及到文件隐私。
不需要安装 Office 软件,直接通过浏览器在线预览 docx、xlsx、pptx 文件。
不支持 pdf 预览。

<iframe class="previewOffice" :src="officeUrl"></iframe>
const url = 'https:***/demo.pdf'
this.officeUrl = `https://view.officeapps.live.com/op/view.aspx?src=${url}`

5. 第三方服务接口地址:XDOC文档预览服务(需要windows的部署环境,且预览效果不是很美观)

excel预览

1. 使用vue-office-excel(只支持xlsx文件预览,不支持xls文件)

支持文档网络地址(https://***.xlsx)。
文件上传时预览,此时可以获取文件的ArrayBuffer或二进制文件预览Blob。

// excel文档预览组件
npm install @vue-office/excel vue-demi@0.13.11
// 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api/<template><vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {components: {VueOfficeExcel},data() {return {excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址}},methods: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>

2. 使用xlsx/sheetjs(需要自己排版)

xlsx插件只是帮助解析excel表中的数据,并不会进行排版,所以需要自己写样式重新排列数据。

npm install xlsx
import * as XLSX from 'xlsx/xlsx.mjs'<el-table :data="excelData" style="width: 100%"><el-table-columnv-for="(value, key, index) in excelData[0]":key="index":prop="key":label="key"></el-table-column>
</el-table>const xlsx_data = await res.data.arrayBuffer()let tem_workbook = XLSX.read(xlsx_data, {type:"array"}); // 解析数据workbook.value = tem_workbookgetTable(tem_workbook.SheetNames[0]); // 读取第一张表数据// 解析xlsx数据为tablefunction getTable(sheetName) {let worksheet = workbook.value.Sheets[sheetName];excelData.value = XLSX.utils.sheet_to_json(worksheet);}

3. 使用SpreadJS

4.使用luckysheet(支持在线编辑,目前只支持xlsx格式)

// 在inde.html文件中引入
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script><div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>mounted() {this.initLuckysheet()
},
methods: {
initLuckysheet() {$(function() {// 配置项var options = {container: 'luckysheet', // luckysheet为容器idshowinfobar: false, // 信息栏lang: 'zh'// 设定表格语言// loadUrl:''}luckysheet.create(options)})},
}

pdf预览

1. 使用vue-office-pdf

支持文档网络地址(https://***.docx)。
文件上传时预览,此时可以获取文件的ArrayBuffer或二进制文件预览Blob。

// pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.13.11
// 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api/<template><vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {components: {VueOfficePdf},data() {return {pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址}},methods: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>

2. 使用pdf-dist

为了正确解析pdf,将pdf文件流转化为一个blob的地址去被解析器读取。由于插件每次只能查询pdf文件一页数据,所以需要额外编写翻页的逻辑代码。被pdf渲染的元素pdf_canvas必须是canvas标签。

npm install pdfjs-dist
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
// 调用函数,解析pdf文件
const blobPdf = new window.Blob([res.data], { type: 'application/pdf;chaset-UTF-8' })
const pdfhref = URL.createObjectURL(blobPdf);
PDFJS.getDocument(pdfhref).promise.then(pdfDoc=>{const numPages = pdfDoc.numPages; // pdf的总页数// 获取第1页的数据pdfDoc.getPage(1).then(page =>{// 设置canvas相关的属性const canvas = document.getElementById("pdf_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);})
})// 切换pdf页数
function changePdfPage (type) {if (type == 'pre') {if (pdfPage.value <= 1) {ElMessage.error('没有上一页了');return }pdfPage.value -= 1} else {if (pdfPage.value >= pdfValue.numPages) {ElMessage.error('没有下一页了');return }pdfPage.value += 1}initPdfPage()
}// 重新初始化pdf对应页数
function initPdfPage () {pdfValue.getPage(pdfPage.value).then(page =>{// 设置canvas相关的属性const canvas = document.getElementById("pdf_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);})
}

3. 使用vue-pdf

npm install vue-pdf
import pdf from 'vue-pdf'
components: {pdf
},
<pdf class="pdf-preview" style="width: 100%;height:100%" ref="myPdfComponent" :src="previewUrl"></pdf>

4. 使用iframe

<iframe :src='previewUrl' frameborder="0" width="100%" height="100%"></iframe>

5. 使用vue-pdf-embed

6. 使用pdfh5.js

txt预览

1.使用textarea实现预览

// 读取txt内容
let xhr = new XMLHttpRequest();
xhr.open("get", '文档地址', true);
xhr.responseType = "blob";
xhr.onload = (e) => {if (e.currentTarget.status == 200) {const reader = new FileReader();reader.readAsText(e.currentTarget.response);//非常重要reader.onload = () => {txtContain = reader.result;};}
};
xhr.send();
// 预览HTML
<textarea :value="txtContain" readonly></textarea>

图片预览

使用文件流预览

const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指图片的类型
const imageHref = URL.createObjectURL(blobImage); // 创造一个地址
preloadImg.value = imageHref // img标签的src属性的值

使用v-viewer

// 全局引入(main.js中)
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
//配置项
Viewer.setDefaults({zIndexInline:9999
})<!--1、以组件的形式-->
<viewer :images="photo"><img v-for="(src,index) in photo" :src="src" :key="index"/> 
</viewer><!--2、以指令的形式-->
只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。
<div v-viewer><img v-for="(src,index) in photo" :src="src" :key="index"/> 
</div>

链接

  • vue-office官方
  • sheetjs
  • 链接1
  • XDOC文档预览服务
  • luckysheet
  • Office Web Viewer
  • 链接2
  • 全网最全的docx、pptx、xlsx、pdf文件预览方案(典藏版

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零开发短视频电商 在AWS上用SageMaker部署开源模型并用Java SDK调用

文章目录 1.创建AWS账户2.登录AWS3.创建域4.部署模型方式一 使用JumpStart可视化界面部署内置的模型方式二 采用python脚本部署私有模型5.调用模型AWS Java SDK调用Http调用6.监控7.自动扩缩容1.创建AWS账户 需要准备好邮箱一个,支持visa功能的信用卡一个。然后到aws上自己去…

电梯安全远程监控系统解决方案

一、方案背景 随着万丈高楼的平地起&#xff0c;电梯也成为了我们出入高层建筑最常用的工具之一。面对电梯数量的不断增加&#xff0c;电梯安全事故也是相继频发&#xff0c;因此关于电梯的安全运行就越来越受到社会各界的关注。电梯的使用在给人们出入高层建筑带来便利的同时&…

CSS新手入门笔记整理:CSS文本样式

首行缩进&#xff1a;text-in-dent 语法 text-in-dent&#xff1a;像素值; 中文段落首行一般需要缩进两个字的空间。想要实现这个效果&#xff0c;那么textindent值应该是font-size值的2倍。 水平对齐&#xff1a;text-align 语法 text-align&#xff1a;取值; 属性值 说…

分布式ID生成框架Leaf升级踩坑

背景&#xff1a; 在项目中需要一个统一的拿单号等唯一ID的服务&#xff0c;就想起了之前用到的leaf&#xff0c;但是因为项目要求&#xff0c;leaf的版本不符合&#xff0c;需要做一些升级 项目地址&#xff1a;https://github.com/Meituan-Dianping/Leaf 升级点&#xff1…

STM32-(串口通信)

什么是通信&#xff1f; 数据交互信息传递条件&#xff1a;两个端 发送端 一、通信基础知识 1、时钟信号划分 同步通信&#xff1a;通信双方根据同步信号通信&#xff0c;比如双方有一个共同的时钟信号(SPI全双工 I2C半双工) 异步通信&#xff1a;通信双方有自己独立的系统时…

Vue3炫酷可旋转的3D地球

首先&#xff0c;我们需要安装Three.js库&#xff1a; npm install three接下来&#xff0c;我们创建一个Vue3项目&#xff0c;并在项目中引入Three.js库。在src/main.js文件中&#xff0c;编写以下代码&#xff1a; import { createApp } from vue import App from ./App.vu…

【解决方案】基于物联网表计的综合能源管理方案

安科瑞顾强 为加快推进国家“双碳”战略和新型能源体系建设&#xff0c;努力实现负荷准确控制和用户精细化管理&#xff0c;按照“政府主导、电网组织、政企协同、用户实施”的指导原则&#xff0c;多地成立市/县级电力负荷管理中心&#xff0c;包括浙江宁波、慈溪、辽宁大连、…

2312skia,13画布包入门

画矶包快速入门 CanvasKit是用比canvasAPI更高级功能集的Skia来绘画元素到canvas中的wasm模块. 最小应用 此例是个最小Canvaskit应用,它为一帧绘画一个圆角矩形.从unpkg.com中提取wasm二进制文件,但你也可自己构建和管理它. <canvas idfoo width300 height300></c…

Java——》JSONObjet 数据顺序

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

Java 普通类和抽象类有哪些区别?

Java 普通类和抽象类有哪些区别&#xff1f; 在Java中&#xff0c;普通类&#xff08;Concrete Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;是两种不同类型的类&#xff0c;它们有一些关键区别。 普通类&#xff08;Concrete Class&#xff09;&#x…

1_企业架构之LNMP

公司企业架构LNMP(单点服务器部署) 学习目标和内容 1、能够描述项目流程 2、能够了解PV、QPS、DAU等参数 3、能够实现服务器基本环境配置 4、能够部署配置MySQL生产环境 5、能够部署配置Nginx生产环境 6、能够部署配置PHP生产环境 7、能够理解PHP-FPM和Nginx关联关系 8、能够配…

思维模型 逆向思维

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。弱者道之用反者道之动。 1 逆向思维的应用 1.1 历史典故 1 曹冲称象 这个故事讲述的是曹操的儿子曹冲如何利用逆向思维解决了称大象重量的难题。曹冲没有直接去称大象的重量&#xff0c;…

海云安谢朝海:开发安全领域大模型新实践 人工智能助力高效安全左移

2023年11月29日&#xff0c;2023中国&#xff08;深圳&#xff09;金融科技大会成功举行&#xff0c;该会议是深圳连续举办的第七届金融科技主题年度会议&#xff0c;也是2023深圳国际金融科技节重要活动之一。做好金融工作&#xff0c;需要兼顾创新与安全&#xff0c;当智能体…

在表格中显示字典的内容(根据后端返回的数据)vue3

进入页面&#xff0c;调接口&#xff0c;后端返回数据&#xff0c;indexType为0或者1&#xff0c;要用这个数据显示字典的内容 用插槽拿到数据 写一个函数&#xff0c;在模板中使用 const { proxy } getCurrentInstance(); // 字典-指标类型 const { index_type } proxy.u…

谈谈Listener

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 Tomcat三大组件&#x…

分享82个节日PPT,总有一款适合您

分享82个节日PPT&#xff0c;总有一款适合您 82个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1boDTl3PiHFXLJ890CoUfJA?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易。…

windows配置go调用python的编译环境

go是支持调用python代码的&#xff0c;之前写了几篇linux的部署教程&#xff0c;因为觉得windows的不复杂就没有写&#xff0c;结果今天新部署一个Windows的环境&#xff0c;有些步骤想不起来了&#xff0c;好记性不如烂笔头&#xff0c;还是记录一下吧。 这些是之前写的linux…

CTF-虚拟机-QEMU-前置知识-操作流程与源码阅读

文章目录 总览内存PCI设备PCI配置空间前64个字节对应源码Memorry空间的BARIO空间的BAR MMIOPMIOIspci访问PCI设备配置空间中的Memory空间和IO空间MMIOPMIO QQM&#xff08;qemu object model&#xff09;简洁概要将 TypeInfo 注册 TypeImpl&#xff1a;ObjectClass的初始化&…

本地下载预训练模型(涉及内容:Resnet等预训练模型地址,以resnet34为例下载预训练模型并移动到指定地址)

运行如下命令&#xff1a; finetune_net.features torchvision.models.resnet34(pretrainedTrue)一直报错。 离线下载模型的预训练模型地址 复制需要下载的模型地址&#xff0c;粘贴到浏览器地址栏中下载&#xff0c;各种模型的下载地址如下&#xff1a; 1. Resnet:model_…

SAS聚类分析介绍

1 聚类分析介绍 1.1基本概念 聚类就是一种寻找数据之间一种内在结构的技术。聚类把全体数据实例组织成一些相似组&#xff0c;而这些相似组被称作聚类。处于相同聚类中的数据实例彼此相同&#xff0c;处于不同聚类中的实例彼此不同。聚类技术通常又被称为无监督学习&#xff0…