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

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

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

相关文章

前端面试练习24.3.12

目录 flex 布局如何使用 说出 space-between 和 space-around 的区别 介绍下粘性布局&#xff08;sticky&#xff09; 特点&#xff1a; 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 结构&#xff1a; 继承&#xff1a; 性能&#xff1a;…

ARM/Linux嵌入式面经(四):浙江大华

大华一面 嵌入式 主要是问的项目相关 标准的十五分钟 电话面 这个面试官主要问项目,我同门面的全问八股,可能面试官不一样吧 文章目录 UART串口通信的波特率,常用波特率有哪些串口通信校验方式是什么,有什么区别方便简单的奇偶校验偶校验(even parity)累加和校验CRC循环冗…

柚见第十一期(前端页面开发)

创建队伍 便于控制样式,在外面套一层div 创建假数据模拟后端传来数据 //假数据模拟 const initFormData { "name": "", "description": "", "expireTime": "", "maxNum": 0, "passwor…

未来艺术展览新趋势——3D线上画展如何创新展示?

一、艺术展示的数字化转型 随着科技的不断进步&#xff0c;3D线上画展作为艺术展示的新趋势&#xff0c;正逐渐改变着人们欣赏和购买艺术作品的方式。对于画家而言&#xff0c;3D线上画展不仅提供了一个全新的平台来展示他们的作品&#xff0c;还开辟了销售渠道&#xff0c;扩大…

天梯赛的赛场安排(Python)

作者 陈越 单位 浙江大学 天梯赛使用 OMS 监考系统&#xff0c;需要将参赛队员安排到系统中的虚拟赛场里&#xff0c;并为每个赛场分配一位监考老师。每位监考老师需要联系自己赛场内队员对应的教练们&#xff0c;以便发放比赛账号。为了尽可能减少教练和监考的沟通负担&#…

js中有哪些数据类型,它们有什么区别?

JavaScript共有八种数据类型&#xff0c;分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 一、Symbol 和 BigInt 是ES6 中新增的数据类型&#xff1a; 1&#xff0c;Symbol 代表创建后独一无二且不可变的数据类型&#xff0c;它主要是为了解决可…

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

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

【CSP试题回顾】201709-2-公共钥匙盒

CSP-201709-2-公共钥匙盒 关键点 1. 选择恰当的数据结构存储钥匙的存取操作 结构体MyKey包含三个字段&#xff1a;time、opt和index。 time字段表示操作发生的时间点。对于取钥匙的操作&#xff0c;这个时间就是老师上课的开始时间&#xff1b;对于还钥匙的操作&#xff0c…

Ollama 只安装 Ollama,本地快速部署谷歌开源大模型Gemma(基于Ollama)

参考&#xff1a;本地快速部署谷歌开源大模型Gemma(基于Ollama) - 知乎 确保系统更新: Bash sudo apt update && sudo apt upgrade 需要先下载Ollama&#xff0c;版本要求0.1.26及以上 运行curl -fsSL https://ollama.com/install.sh | sh 监听 Ollama API 接…

C++ 之LeetCode刷题记录(三十九)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 22. 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用…

2023年河北省职业院校技能大赛(高职组) “云计算”赛项任务书

2023年河北省职业院校技能大赛 “云计算”赛项任务书 第一场次&#xff1a;私有云(50分)任务一、私有云服务搭建(15分)任务二、私有云服务运维(25分)任务三、私有云运维开发(10分&#xff09; 第二场次&#xff1a;容器云任务一、容器云服务搭建任务(5分)任务二、容器云应用部署…

2024年春招助学活动:一批FPGA高端项目让你轻松拿到大厂offer

这里写目录标题 1、前言2、FPGA行业现状3、简历怎么写4、FPGA高端项目4.1 图像类&#xff1a;FPGA图像缩放多路视频拼接4.2 通信类&#xff1a;千兆网UDP协议栈4.3 通信类&#xff1a;万兆网UDP协议栈4.4 图像通信综合&#xff1a;FPGA图像缩放UDP网络视频传输4.5 图像高速接口…

零基础学习JS--基础篇--JavaScript类型化数组

JavaScript 类型化数组是一种类似数组的对象&#xff0c;并提供了一种用于在内存缓冲中访问原始二进制数据的机制。 引入类型化数组并非是为了取代 JavaScript 中数组的任何一种功能。相反&#xff0c;它为开发者提供了一个操作二进制数据的接口。这在操作与平台相关的特性时会…

Java SE String类(一):常用方法(上)

1. 常用方法 1.1 字符串构造 String类的常用构造方法只有以下三种 public class Main {public static void main(String[] args) {String s1 "hello";//使用常量串进行构造String s2 new String("hello");//创建String对象char[] array {h,e,l,l,o};…

Be Your Own Teacher 论文阅读

参考文献&#xff1a; Be Your Own Teacher 论文阅读_be your own teacher: improve the performance of co-CSDN博客 Be Your Own Teacher: Improve the Performance of Convolutional Neural Networks via Self Distillation-CSDN博客 Self Distillation 自蒸馏论文解读-C…

DeepLearning in Pytorch|我的第一个NN-共享单车预测

目录 概要 一、数据准备 导入数据 数据可视化 二、设计神经网络 版本一 版本二&#xff08;正片&#xff09; 三、测试 小结 概要 我的第一个深度学习神经网络模型---利用Pytorch设计人工神经网络对某地区租赁单车的使用情况进行预测 输入节点为1个&#xff0c;隐含…

大预言模型——ChatGPT,Claude3、Sora、等技术

原文链接&#xff1a;大预言模型——ChatGPT,Claude3、Sora、等技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596849&idx3&sn111d68286f9752008bca95a5ec575bb3&chksmfa823ad6cdf5b3c0c446eceb5cf29cccc3161d746bdd9f26cc060f78c359ec3e2a8f35…

【Rust】——use关键字

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

预测建模案例-预防机器故障

预测分析是一种使用当前数据和历史数据来预测活动、行为和趋势的高级分析形式。它涉及将统计分析技术、数据查询和机器学习算法应用于数据集。预测分析还涉及创建预测模型&#xff0c;以对特定操作或事件发生的可能性设置数值或评分。 预测分析寻找数据模式并预测未来趋势&…

Java开发从入门到精通(一):Redis

目录&#xff1a; Redis介绍 Redis是单线程多路IO复用技术 Redis基础操作 Redis使用场景 Redis支持的java客户端 Memcache与Redis的区别 Mysql和Redis的区别 Redis的8种数据类型&#xff0c;以及每种数据类型的使用场景 Redis事务 1、Redis介绍 Redis是一个开源的键值存储系统。…