前端使用插件预览pdf、docx、xlsx、pptx格式文件

PDF预览

H5页面pdf预览

插件:pdfh5
版本:“pdfh5”: “^1.4.7”

npm install pdfh5

import PdfH5 from "pdfh5";
import "pdfh5/css/pdfh5.css";// methods
this.$nextTick(() => {this.pdfH5 = new PdfH5("#pdf", {pdfurl: this.pdfData.url,pageNum: false,backTop: false,});this.pdfH5.on("ready", () => {this.pdfData.totalNum = this.pdfH5.totalNum - 0this.pdfData.currentNum = this.pdfH5.currentNum - 0})this.pdfH5.on("scroll", (scrollTop, currentNum) => {this.pdfData.currentNum = currentNum - 1 === 0 ? 1 : currentNum - 1})this.pdfH5.on('success', () => {this.inpDisabled = false})
})// html
<view id="pdf"></view><view class="operation-box"><view class="operation"><view class="page-num-info"><text>{{ pdfData.currentNum }}</text>/<text>{{ pdfData.totalNum }}</text></view><view class="jump-box" v-if="!tips" @click="clickInp"><view class="inp-box">跳转 <input style="width: 60px;text-align: center;color: black" type="number" @input="printfVal" v-model="jumpNum" /></view><view @click.stop="goToPage">确定</view></view><view v-else class="tips">尚未加载完成请等待..</view><uni-icons @click="goToTop" type="home" size="30" color="#b0b2b2"></uni-icons></view></view>

docx预览(不能预览doc格式文件)

插件:docx-preview
版本:“docx-preview”: “^0.1.20”

npm i docx-preview

import * as DocxJs from 'docx-preview'// methods
const f = await fetch(this.fileUrl);const ab = await f.arrayBuffer();await DocxJs.renderAsync(ab, document.getElementById('docxDom'), document.getElementById('docxDom'), {inWrapper: false, // 适配移动端
})// html
<view id="docxDom"></view>

xlsx预览

npm i xlsx

const f = await fetch(this.fileUrl);const ab = await f.arrayBuffer();const wb = XLSX.read(ab, {});const ws = wb.Sheets[wb.SheetNames[0]];this.xlsxFileData.tableData = XLSX.utils.sheet_to_json(ws, {raw: false, rawNumbers: false})this.xlsxFileData.labelList.splice(0)Object.keys(this.xlsxFileData.tableData[0]).forEach(v => {this.xlsxFileData.labelList.push(v)})// html
<uni-table border stripe emptyText="暂无更多数据"><!-- 表头行 --><uni-tr><uni-th align="center" v-for="item in xlsxFileData.labelList">{{ item }}</uni-th></uni-tr><!-- 表格数据行 --><uni-tr v-for="item in xlsxFileData.tableData"><uni-td  v-for="key in xlsxFileData.labelList">{{ item[key] }}</uni-td></uni-tr></uni-table>

pptx预览

github: PPTXjs
gitee: PPTXjs

拷贝文件到本地项目中在index.html引入

如果在index.html中引入没有加载,则动态引入

// app.vue// created || onLaunch
this.addLink('/static/PPTXjs/css/pptxjs.css')
this.addLink('/static/PPTXjs/css/nv.d3.min.css')
this.addScript('/static/PPTXjs/js/jquery-1.11.3.min.js')
this.addScript('/static/PPTXjs/js/jszip.min.js')
this.addScript('/static/PPTXjs/js/filereader.js')
this.addScript('/static/PPTXjs/js/d3.min.js')
this.addScript('/static/PPTXjs/js/nv.d3.min.js')
this.addScript('/static/PPTXjs/js/dingbat.js')
this.addScript('/static/PPTXjs/js/pptxjs.js')
this.addScript('/static/PPTXjs/js/divs2slides.js')//methods
addScript (src) {let script = document.createElement('script');script.src = src;script.type = 'text/javascript';// script.setAttribute('async', true);// script.setAttribute('defer', true);document.head.appendChild(script);
},
addLink (href) {let link = document.createElement('link');link.rel = "stylesheet"link.href = hrefdocument.head.appendChild(link);
},

引入拷贝的js文件以后

// methods
this.$nextTick(() => {$("#pptxDom").pptxToHtml({pptxFileUrl: this.fileUrl,slidesScale: "100%",slideMode: false,keyBoardShortCut: false,});// 适配移动端!!let timer = setInterval(() => {const $slides = $(".slides");if ($slides.children().length) {const slidesWidth = Math.max(...Array.from($slides.children()).map((s) => s.offsetWidth));const $wrapper = $("#pptxDom");const wrapperWidth = window.innerWidth;const wrapperHeight = window.innerHeight;$wrapper.css({transform: `scale(${wrapperWidth / slidesWidth})`,"transform-origin": "top left",height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",});clearInterval(timer);}}, 100)})

使用iframe预览(缺点:在微信内置浏览器不显示或者跨域,需要使用插件。)

文档预览服务

xdocin需要付费,前几天免费体验
日常格式都可以预览,比如xls、xlsx、doc、docx、pptx、pdf

<iframe :src="`https://view.xdocin.com/view?src=${encodeURIComponent(fileUrl)}`"  style="min-width: 100vw;min-height: 100vh;"></iframe>

微软免费预览
日常格式除了不能预览pdf,其他类型都可以(文件大小不超过10M)

<!-- pdf格式文件可以直接赋值iframe的src预览,其余交给微软服务 -->
<iframe allow="payment" v-if="fileUrl.includes('.pdf')" :src="fileUrl"  style="min-width: 100vw;min-height: 100vh;"></iframe>
<iframe v-else :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`"  style="min-width: 100vw;min-height: 100vh;"></iframe>

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

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

相关文章

【算法系列篇】递归、搜索和回溯(二)

文章目录 前言1. 两两交换链表中的节点1.1 题目要求1.2 做题思路1.3 代码实现 2. Pow(X,N)2.1 题目要求2.2 做题思路2.3 代码实现 3. 计算布尔二叉树的值3.1 题目要求3.2 做题思路3.3 代码实现 4. 求根节点到叶结点数字之和4.1 题目要求4.2 做题思路4.3 代码实现 前言 前面为大…

计算机毕业设计springboot+ssm停车场车位预约系统java

管理员不可以注册账号 停车位包括车位所在楼层、车位编号、车位类型(全时间开放/高峰期开放)、预定状态等 用户预约时要求支付预约时间段的停车费用 违规行为&#xff1a;1.停车超过预约时间段 2.预约未使用 于系统的基本要求 &#xff08;1&#xff09;功能要求&am…

6G来袭,真的有必要吗?

6G来袭&#xff0c;6G标准将在2025年完成制定&#xff0c;2030年商用。当5G都还没玩明白的时候&#xff0c;6G又来了。 这次6G又提出了三个全新高大上场景&#xff0c;感知通信、人工智能通信、天地一体泛在物联&#xff0c;精英们还说&#xff0c;未来要连接很多机器人、元宇宙…

PHP基础 - 循环与条件语句

循环语句 1)for循环: 重复执行一个代码块指定的次数。 for ($i = 0; $i < 5; $i++) { // 初始化 $i 为 0,每次循环后将 $i 值增加 1,当 $i 小于 5 时执行循环echo "The number is: $i \n"; // 输出当前 $i 的值并换行 }// 循环输出结果为: // The number …

mysql字段设计规范:使用unsigned(无符号的)存储非负值

如果一个字段存储的是数值&#xff0c;并且是非负数&#xff0c;要设置为unsigned&#xff08;无符号的&#xff09;。 例如&#xff1a; 备注&#xff1a;对于类型是 FLOAT、 DOUBLE和 DECIMAL的&#xff0c;UNSIGNED属性已经废弃了&#xff0c;可能在mysql的未来某个版本去…

mysql分别在windows和linux下的备份策略

嗟乎&#xff01; 一、概述 mysql数据库该怎么备份呢&#xff1f; 数据库备份有几个概念&#xff1a;全量备份、增量备份、差异备份。当然啦&#xff0c;数据库备份又有冷备份和热备份&#xff0c;即物理备份和逻辑备份之分。冷备份就是将mysql停了&#xff0c;然后直接拷贝…

Python入门第2篇

pip包管理器 包管理器类似.NET下的nuget&#xff0c;主要用于管理引用依赖项。 安装Python的时候&#xff0c;已经默认安装了pip包管理器&#xff0c;因此无需单独安装 cmd&#xff0c;输入&#xff1a;pip --version 显示pip版本号信息&#xff0c;即代表pip安装成功&…

前端知识笔记(四十二)———http和https详细解析

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于在计算机网络中传输超文本的协议。它是一个客户端-服务器协议&#xff0c;用于从 Web 服务器传输超文本到本地浏览器。HTTP 使用 TCP/IP 协议作为底层传输协议&#xff0c;并使用默认端口号80。 HTTPS&…

8-tornado中模板的使用(通过字符串返回、通过模板Template返回、通过模板render返回)、模板案例

1 Template 1.1 通过字符串返回 import tornado class IndexHandler(web.RequestHandler):def get(self):arg Templateself.finish(f<h1>Hello {arg}!!</h1>)1.2 通过模板Template返回 tornado.template 一个简单的模板系统&#xff0c;将模板编译为Python代码。…

c 一,二,三维数组的定义和赋值

1. 定义数组必须指定数组的大小&#xff0c;也就是用多少存储空间来存储此数组 2.定义数组必须用数组的标准格式定义&#xff1a;数组名下标的形式 3.只有字符串可以用指针来定义 4.可以把c 中一切数和struct 理解为char 数组 比如int 就是4字节的char数组 #include <…

编程语言的演进历程与未来发展趋势

第一代 编程语言的发展历程起源于早期的机器语言阶段&#xff0c;这是一种由二进制代码构成的计算机能够直接解读并执行的语言。然而&#xff0c;鉴于其过于复杂且难以理解&#xff0c;故这一时代的语言并不常为人类所采纳。 第二代 紧接着产生的第二代语言旨在简化编程过程…

1001 害死人不偿命的(3n+1)猜想

卡拉兹(Callatz)猜想&#xff1a; 对任何一个正整数 n&#xff0c;如果它是偶数&#xff0c;那么把它砍掉一半&#xff1b;如果它是奇数&#xff0c;那么把 (3n1) 砍掉一半。这样一直反复砍下去&#xff0c;最后一定在某一步得到 n1。卡拉兹在 1950 年的世界数学家大会上公布了…

C++ //习题2.5 请写出下列表达式的值。

C程序设计 &#xff08;第三版&#xff09; 谭浩强 习题2.5 习题2.5 请写出下列表达式的值。 (1) 3.5 * 3 2 * 7 - ‘a’ (2) 26 / 3 34 % 3 2.5 (3) 45 / 2 (int)3.14159 / 2 (4) a b (c a 6) 设a的初值为3 (5) a 3 * 5, a b 3 * 2 (6) (int)(a 6.5) % 2 …

UI自动化测试工具的定义及重要性

UI自动化测试工具在现代软件开发中起着不可或缺的作用。它们能够提高测试效率、减少人为错误、提供全面的测试覆盖&#xff0c;并支持持续集成。通过有效使用UI自动化测试工具&#xff0c;开发团队可以提高软件质量&#xff0c;提供更可靠的应用程序&#xff0c;满足用户的需求…

C语言之数组精讲(2)

目录 数组的复制 输入数组元素的值 对数组的元素进行倒序排列 使用数组进行成绩处理 对象式宏 数组元素的最大值和最小值 赋值表达式的判断 数组的元素个数 结语 数组的复制 我们把数组中的元素全部复制到另一个数组中。 #include<stdio.h>int main() {int i;int…

SwinIR: Image Restoration Using Swin Transformer

SwinIR 简介 论文地址&#xff1a;SwinIR: Image Restoration Using Swin Transformer 代码&#xff1a;SwinIR ​ 本文提出了一个基于swin transformer的图像超分模型swinIR。其中SwinIR分为三部分&#xff1a;浅层特征提取、深层特征提取和高质量图像重建模块。 现阶段问…

WordPress如何通过header给页面发送原生HTTP头

在WordPress中&#xff0c;你可以使用header() 函数来发送原生HTTP头。这个函数通常在主题文件&#xff08;例如header.php&#xff09;或者插件中使用。以下是一个简单的例子&#xff0c;演示如何在WordPress中使用header() 函数发送原生HTTP头&#xff1a; <?php // 在主…

19.java程序设计-基于SpringBoot的博客管理系统的设计与实现

摘要 随着信息技术的迅速发展&#xff0c;博客作为一种重要的信息传播和交流工具&#xff0c;逐渐在互联网上占据重要地位。为了满足用户对个性化博客管理的需求&#xff0c;本研究设计并实现了一种基于Spring Boot框架的博客管理系统。 本系统通过采用前后端分离的架构&…

【算法题】密钥格式化 (js)

!](https://img-blog.csdnimg.cn/direct/bf9a3d781a8043c997593260c0a8306f.png) 第一部分的字符可以少于… const str "5F3Z-2e-9w"; const str1 "2-5g-3-J"; function solution(num, str) {const arr str.split("-");const head arr[0];…

【C++11(三)】智能指针详解--RAII思想循环引用问题

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; C11 1. 前言2. 为什么要有智能指针?3. RAII思想…