当前位置: 首页 > news >正文

vue 在线预览word

1 mammoth
先找的是mammoth这个插件yarn add mammoth,版本是1,7.0
参考网上的示例使用如下:

import mammoth from "mammoth";
const vHtml = ref("")
const readExcelFromRemoteFile = (url) =>{var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "arraybuffer";xhr.onload = function () {if (xhr.status == 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {nextTick(() => {// document.querySelector("#wordView").innerHTML =//   resultObject.value;vHtml.value = resultObject.value;});});}};xhr.send();
}

在word中设置的样式是
1
因为这个图片是做了文字环绕,因此他识别不了.
1

在网页端显示的如下面:
1
2 docx-preview
docx-preview使用就不是很顺利

index:1 Uncaught (in promise) SyntaxError: The requested module '/psi/node_modules/.vite/deps/docx-preview.js?v=d111f2a1' does not provide an export named 'default'
jszip.min.js:13 Uncaught (in promise) Error: Can't read the data of 'the loaded zip file'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?at jszip.min.js:13at async Function.load (open-xml-package.ts:26)at async Function.load (word-document.ts:52)at async renderAsync (docx-preview.ts:56)

使用这个组件,要装两个依赖包

yarn add docx-preview

参考了vue3+typescript 预览docx文件,这是我的版本用的0.3.0,并不支持doc格式
1
但是docx则可以显示,文件上传的同时,直接就可以渲染出来。这个我喜欢。
参考代码如下

<template><el-container><el-aside width="250px"><el-header height="45px"><div class="nav"><el-button type="primary">保存</el-button></div></el-header><el-main><el-form :model="dataForm"  label-suffix=":" label-position="top" style="margin-top: 10px;"><el-form-item label="合同名称" prop="name"><el-input v-model="dataForm.name" placeholder="请输入合同名称" clearable></el-input></el-form-item><el-form-item label="合同模板" prop="tpl"><sc-upload-file v-model="dataForm.tpl" :limit="1" drag :on-change="handleChange" :auto-upload="false"><el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon><div class="el-upload__text">拖拽到这 或<em>点击上传</em></div></sc-upload-file></el-form-item><el-form-item label="电子签章" prop="dzqz"><sc-upload v-model="dataForm.dzqz" title="电子签章"></sc-upload></el-form-item></el-form></el-main></el-aside><el-main ><div ref="container" class="docx"></div></el-main><el-aside width="250px"><div class="header">可用的合同参数</div><el-table :data="params" style="width: 100%;" border size="small" stripe highlightCurrentRow><el-table-column prop="name" label="参数名称" align="left" ></el-table-column><el-table-column prop="param" label="参数" align="left" ></el-table-column></el-table></el-aside></el-container>
</template>
let container = ref();
const handleChange: UploadProps['onChange'] = (file: any) => {fileViews.value = filerenderAsync(fileViews.value.raw, container.value, undefined, {className: "docx", // 默认和文档样式类的类名/前缀inWrapper: true, // 启用围绕文档内容渲染包装器ignoreWidth: false, // 禁止页面渲染宽度ignoreHeight: false, // 禁止页面渲染高度ignoreFonts: false, // 禁止字体渲染breakPages: true, // 在分页符上启用分页ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页experimental: false, //启用实验性功能(制表符停止计算)trimXmlDeclaration: true, //如果为真,xml声明将在解析之前从xml文档中删除debug: false, // 启用额外的日志记录})
}

这个效果就比较好
1
接下来的问题,上面的代码是在文件上传的时候,直接预览word,保存之后,通过再打开这个合同模板,又是怎么加载出来呢?从下图可以看到word那部分是空白的。
1

const preview = (url) => {let xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "blob";xhr.onload = function () {if (this.status === 200) {renderAsync(xhr.response, dzhtRef.value);}};xhr.send();
}async function load(val:string){const res = await proxy.$api.contract.psiContractTpl.load({id:val,asId:userInfo.value.currentAsId});if (res.success) {if (res.data){dataForm.value = res.data;nextTick(()=>{preview(dataForm.value.htFilePath);})}} else {proxy.$message.error(res.msg);}
}

这样就出来了
1

相关文章:

vue 在线预览word

1 mammoth 先找的是mammoth这个插件yarn add mammoth,版本是1,7.0 参考网上的示例使用如下&#xff1a; import mammoth from "mammoth"; const vHtml ref("") const readExcelFromRemoteFile (url) >{var xhr new XMLHttpRequest();xhr.open("…...

七彩虹八渐变 外贸建站公司wordpress模板

进出口水果wordpress外贸模板 漂亮水果wordpress外贸模板&#xff0c;做水果进出品生意的外贸公司自建站官网模板。 https://www.jianzhanpress.com/?p3516 玩具wordpress外贸模板 简洁玩具wordpress外贸模板&#xff0c;适合做跨境电商外贸公司使用的wordpres外贸s网站主题…...

[C++] C++生成随机数

一、简介 在C语言中常使用srand()random()的方式生成随机数&#xff0c;该方式并不是一个很好的随据说生成方法&#xff0c;一方面是因为其生成的随机数质量较低&#xff0c;另一方面其随机数范围也有所限制。在C11中推荐使用随机数引擎的方式生成随机数。 如何高效得生成高质…...

web开发——前端html、css、JavaScript学习总结(持续更新中.......)

目录模版 1 html:结构标签/属性文本标记: mark文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong超链接: a联系信息: addressdiv 定义文档中的分区或节: div行元素:spanhtml结构: main / section / articlenav表格:table html中各种标签/属性的英文扩…...

LeetCode 2044.统计按位或能得到最大值的子集数目

给你一个整数数组 nums &#xff0c;请你找出 nums 子集 按位或 可能得到的 最大值 &#xff0c;并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素&#xff08;或不删除&#xff09;得到&#xff0c;则认为数组 a 是数组 b 的一个 子集…...

Selenium自动化测试细节讲解

与以前瀑布式开发模式不同&#xff0c;现在软件测试人员具有使用自动化工具执行测试用例套件的优势&#xff0c;而以前&#xff0c;测试人员习惯于通过测试脚本执行来完成测试。 但自动化测试的目的不是完全摆脱手动测试&#xff0c;而是最大程度地减少手动运行的测试。自动化…...

强化学习工具箱(Matlab)

1、Get Started 1.1、MDP环境下训练强化学习智能体 MDP环境如下图 每个圆圈代表一个状态每个状态都有上或下的选择智能体从状态 1 开始智能体接收的奖励值为图中状态转移的值训练目标是最大化累计奖励 &#xff08;1&#xff09;创建 MDP 环境 创建一个具有 8 个状态和 2 …...

程序人生 - 爬虫者,教育也!

作为一个站长&#xff0c;你是不是对爬虫不胜其烦&#xff1f;爬虫天天来爬&#xff0c;速度又快&#xff0c;频率又高&#xff0c;服务器的大量资源被白白浪费。 看这篇文章的你有福了&#xff0c;我们今天一起来报复一下爬虫&#xff0c;直接把爬虫的服务器给干死机。 本文有…...

OKLink2月安全月报| 2起典型漏洞攻击案例分析

在本月初我们发布的2024年2月安全月报中提到&#xff0c;2月全网累计造成损失约1.03亿美元。其中钓鱼诈骗事件损失占比11.76%。 OKLink提醒大家&#xff0c;在参与Web3项目时&#xff0c;应当仔细调研项目的真实性、可靠性&#xff0c;提升对钓鱼网站和风险项目的甄别能力&…...

可视化表单流程编辑器为啥好用?

想要提升办公率、提高数据资源的利用率&#xff0c;可以采用可视化表单流程编辑器的优势特点&#xff0c;实现心中愿望。伴随着社会的进步和发展&#xff0c;提质增效的办公效果一直都是很多职场办公团队的发展需求&#xff0c;作为低代码技术平台服务商&#xff0c;流辰信息团…...

【代码】Android|获取存储权限并创建、存储文件

版本&#xff1a;Android 11及以上&#xff0c;gradle 7.0以上&#xff0c;Android SDK > 29 获取存储权限 获取存储权限参考&#xff1a;Android 11 外部存储权限适配指南及方案&#xff0c;这篇文章直接翻到最下面&#xff0c;用XXPermissions框架。它漏了这个框架的使用方…...

每日一练 | 华为认证真题练习Day196

1、在如图所示的网络中&#xff0c;三台交换机运行RSTP&#xff0c;配置情况如图所示 根据图中配置情况判断根交换机为 A. SWA B. SWB C. SWC D. 无法确定 2、如图所示&#xff0c;在RT1路由器上配置OSPF多进程&#xff0c;其中RT1的进程100通过骨干区域和RT2建立OSPF邻居&…...

如何在Linux本地搭建Tale网站并实现无公网ip远程访问

文章目录 前言1. Tale网站搭建1.1 检查本地环境1.2 部署Tale个人博客系统1.3 启动Tale服务1.4 访问博客地址 2. Linux安装Cpolar内网穿透3. 创建Tale博客公网地址4. 使用公网地址访问Tale 前言 今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale&#xff0c;Tale…...

论哪个行业官网颜值普遍较高,装修设计第二,无人敢称第一。

装饰设计公司官网普遍颜值较高的原因主要包括以下几点&#xff1a; 1. 美学要求&#xff1a; 装饰设计公司本身就是从事美学和艺术的行业&#xff0c;他们对于视觉效果和美感有着较高的要求&#xff0c;因此他们的官网在设计上往往会更加注重颜值。 2. 品牌形象&#xff1a…...

Elastic Stack--08--SpringData框架

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 SpringData[官网&#xff1a; https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…...

华为OD机试 - 模拟数据序列化传输(Java JS Python C C++)

题目描述 模拟一套简化的序列化传输方式,请实现下面的数据编码与解码过程 编码前数据格式为 [位置,类型,值],多个数据的时候用逗号分隔,位置仅支持数字,不考虑重复等场景;类型仅支持:Integer / String / Compose(Compose的数据类型表示该存储的数据也需要编码)编码后数…...

使用Tokeniser估算GPT和LLM服务的查询成本

将LLM集成到项目所花费的成本主要是我们通过API获取LLM返回结果的成本&#xff0c;而这些成本通常是根据处理的令牌数量计算的。我们如何预估我们的令牌数量呢&#xff1f;Tokeniser包可以有效地计算文本输入中的令牌来估算这些成本。本文将介绍如何使用Tokeniser有效地预测和管…...

2-Docker-应用-多容器部署Django+Vue项目(nginx+uwsgi+mysql)

摘要&#xff1a; 本文详细介绍了如何使用Docker部署一个多容器DjangoVue项目&#xff0c;包括nginx、uwsgi和mysql。文章内容涵盖了基础知识回顾、需求分析、设计方案、实现步骤、技巧与实践、性能优化与测试、常见问题与解答以及结论与展望。 阅读时长&#xff1a;约60分钟…...

Vue 中的 key:列表渲染的秘诀

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

Linux系统架构----nginx的服务基础

一.Nginx的概述 Nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。Nginx稳定性高&#xff0c;而且系统资源消耗少Nginx相对于Apache主要处理静态请求&#xff0c;而apache主要处理动态请求Nginx是一款轻量级的Web 服务器/反向代理服务…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...