位置: IT常识 - 正文

vue 预览 word(vue预览word加水印)

编辑:rootadmin
vue 预览 word

推荐整理分享vue 预览 word(vue预览word加水印),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue预览word文件并能打印,vue预览word插件,vue预览word文件并能打印,vue预览word插件,vue预览word文件并能打印,vue预览word文件并能打印,vue预览word文件二进制流,vue预览word插件,内容如对您有帮助,希望把文章链接给更多的朋友!

最近做的项目要求实现预览word, pdf,png等文件功能,pdf以及png都很简单,轻松百度搞定,但是word预览研究了好久,所以特此记录分享。

前端实现预览word分为两种,一种是上传前预览(也就是前端使用input或者组件等选择文件后直接预览,此时还没有上传给后端,我定义为纯前端预览),一种是上传后预览(就是文档已经上传到后端,通过后端给的文件流实现预览)

一、先说第一种的实现方式:

首先下载安装docx-preview,引入

npm install xlsx docx-preview --saveimport { defaultOptions, renderAsync } from "docx-preview";var docxx = require("docx-preview");

我这里使用的是element ui 上传组件

<el-upload    class="upload-demo"    action=""    :http-request="myUpload"    :show-file-list="false"    >    <span class = "uploadEnclosure">上传附件</span>    </el-upload>

选择文件以后

myUpload(content){console.log(content);const downUrl = URL.createObjectURL(content.file)const a = document.createElement('a');this.$refs.selectFileNameBox.innerHTML = "";this.$refs.selectFileNameBox.append(a);a.innerHTML = content.file.name;a.href = downUrla.download = content.file.name;a.target = '_blank';const addTypeArray = content.file.name.split(".");const addType = addTypeArray[addTypeArray.length - 1];console.log(addType);this.uploadFileName = content.file.name;this.uploadFileObj = content.file;if (addType === "pdf") {const url = URL.createObjectURL(content.file);console.log(url);this.xzbjPreviewIframeSrc = url;this.xzbjIframeIsShow = true;this.xzbjDialogPreviewDiv = false;this.xzbjPreviewImgUrl = "";this.xzbjDocPreviewFlag = false;this.previewBoxStyle = "height:400px;position: relative;overflow:hidden;"}else if(addType === "doc" || addType === "docx" || addType === "word"){console.log("word文件预览")this.xzbjPreviewImgUrl = "";this.xzbjPreviewIframeSrc = "";this.xzbjDialogPreviewDiv = false;this.xzbjDocPreviewFlag = true;this.xzbjIframeIsShow = false;// 将file转为bufferlet fr = new FileReader();fr.readAsArrayBuffer(content.file);fr.addEventListener("loadend",(e) => {console.log("loadend---->", e)let buffer = e.target.result;this.docxRender(buffer);},false);}//".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg, .png, .jpeg,"else if (["png", "jpg", "jpeg","bmp"].includes(addType)) {this.xzbjPreviewIframeSrc = "";this.xzbjIframeIsShow = false;this.xzbjDocPreviewFlag = false;this.imgPreview(content.file);this.previewBoxStyle = "height:400px;position: relative;overflow:auto;"} else if (addType === "rar" || addType === "zip" || addType === "7z") {this.filePreviewInfo = "请下载附件进行查看"this.xzbjPreviewImgUrl = "";this.xzbjPreviewIframeSrc = "";this.xzbjDocPreviewFlag = false;this.xzbjDialogPreviewDiv = true;this.$message({message: "该文件类型暂不支持预览",type: "warning",});return false;}else{this.filePreviewInfo = "该文件类型暂不支持预览"this.xzbjPreviewIframeSrc = "";this.xzbjIframeIsShow = false;this.xzbjDialogPreviewDiv = true;this.xzbjPreviewImgUrl = "";this.xzbjDocPreviewFlag = false;this.$message({message: "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",type: "warning",});}}// 渲染docxdocxRender(buffer) {let bodyContainer = document.getElementById("demoDocContainer");renderAsync(buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型bodyContainer, // HTMLElement 渲染文档内容的元素,null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。this.docxOptions // 配置).then(res => {console.log("res---->", res)})},vue 预览 word(vue预览word加水印)

下面是图片预览核心代码

imgPreview(file) {// 看支持不支持FileReaderif (!file || !window.FileReader) return;// console.log(/^image/.test(file.type), "---/^image/.test(file.type)")if (/^image/.test(file.type)) {// 创建一个readerlet reader = new FileReader();// 将图片将转成 base64 格式reader.readAsDataURL(file);// 读取成功后的回调reader.onload = ({ target }) => {this.xzbjDialogPreviewDiv = false;this.xzbjPreviewImgUrl = target.result; //将img转化为二进制数据// console.log("target:", target);};}},

这样就实现了纯前端预览word功能

二、接下来实现 配合后端预览word

根据后端返回的流预览word

request({    method: "get",    url: "/notice/noticeFileView",    responseType: 'blob',    params:{    id:row.id    },    headers: {    "Content-Type": 'application/json'    },    }).then(res=>{    console.log(res,"---文件预览");       if(row.suffix.includes("pdf")){    this.previewPdfFn(res);    // let blob = new Blob([res],{    // type: 'application/pdf'    // })    // let url = window.URL.createObjectURL(blob);    this.xqPreviewImgUrl = "";    this.xqPreviewPdfUrl = this.previewPdfFn(res);    this.xqPdfPreviewFlag = true;    this.xqDocPreviewFlag = false;    this.xqPerviewStyle = "height:600px;position: relative;overflow:hidden"    }else if(row.suffix.includes("docx") || row.suffix.includes("doc")|| row.suffix.includes("word")){    console.log("预览word")    this.xqDocPreviewFlag = true;    let blob = new Blob([res],{    type: 'application/pdf'    })    this.$nextTick(()=>{    console.log(this.$refs.xqDocContainer,"---this.$refs.xqDocContainer")    docxx.renderAsync(blob, this.$refs.xqDocContainer)    })       } else if (row.suffix === ".rar" || row.suffix === ".zip" || row.suffix === "7z") {    this.xqDocPreviewFlag = false;    this.xzbjPreviewImgUrl = "";    this.xzbjPreviewIframeSrc = "";    this.$message({    message: "该文件类型暂不支持预览",    type: "warning",    });    return false;    }else if([".png", ".jpg", ".jpeg",".bmp"].includes(row.suffix)){    let blob = new Blob([res],{    type: 'application/pdf'    })    console.log(blob,"---blob")    let url = window.URL.createObjectURL(blob);    this.xqPreviewImgUrl = url;    this.xqPdfPreviewFlag = false;    this.xqDocPreviewFlag = false;    this.xqPreviewPdfUrl = "";    this.xqPerviewStyle = "height:600px;position: relative;overflow:auto"    }       this.xqDialogPreviewDiv = false;    }).catch(err=>{    console.log(err,"--文件预览失败")    })

完毕

下面是参考链接:

https://www.jianshu.com/p/8e1e90570c52 预览word excel

https://blog.csdn.net/kaimo313/article/details/127012225 vue里使用docx-preview预览docx文件

https://volodymyrbaydalka.github.io/docxjs/

最后是一个好友赠送的组件

<template><div class="docx-preview-wrap"><h4><input type="file" id="file" accept=".docx" @change="getFile"/></h4><div id="bodyContainer"></div></div></template><script>import { defaultOptions, renderAsync } from "docx-preview";console.log(defaultOptions);export default {name: 'DocxPreview',data () {return {docxOptions: {className: "kaimo-docx-666", // string:默认和文档样式类的类名/前缀inWrapper: true, // boolean:启用围绕文档内容的包装器渲染ignoreWidth: false, // boolean:禁用页面的渲染宽度ignoreHeight: false, // boolean:禁止渲染页面高度ignoreFonts: false, // boolean:禁用字体渲染breakPages: true, // boolean:在分页符上启用分页ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页experimental: false, // boolean:启用实验功能(制表符停止计算)trimXmlDeclaration: true, // boolean:如果为true,解析前会从​​ xml 文档中移除 xml
本文链接地址:https://www.jiuchutong.com/zhishi/300043.html 转载请保留说明!

上一篇:过来人告诉你:Java学到什么程度可以找工作?(过来人告诉你:女人最珍贵的三种东西,舍得给你说明爱你)

下一篇:nodejs的下载安装(nodejs 下载)

  • iqoo8怎么开90帧(iqoou1怎么开90帧)

    iqoo8怎么开90帧(iqoou1怎么开90帧)

  • 京东怎么换身份证绑定(京东怎么换身份证号码)

    京东怎么换身份证绑定(京东怎么换身份证号码)

  • 淘宝频道红包怎么使用(淘宝频道红包怎么找到商品)

    淘宝频道红包怎么使用(淘宝频道红包怎么找到商品)

  • 魅族 18 Pro共有几个摄像头(魅族18 pro型号)

    魅族 18 Pro共有几个摄像头(魅族18 pro型号)

  • 手机可以报名教师资格证吗(手机可以报名教资认定吗)

    手机可以报名教师资格证吗(手机可以报名教资认定吗)

  • 微信怎么看朋友圈访客记录(微信怎么看朋友在不在线状态)

    微信怎么看朋友圈访客记录(微信怎么看朋友在不在线状态)

  • 苹果手机空白桌面如何删除(苹果手机空白桌面截图)

    苹果手机空白桌面如何删除(苹果手机空白桌面截图)

  • 腾讯会议屏幕上有自己的名字(腾讯会议屏幕上的水印怎么去除)

    腾讯会议屏幕上有自己的名字(腾讯会议屏幕上的水印怎么去除)

  • 拼多多店铺活跃度一般指的是什么(拼多多店铺活跃度低是怎么回事)

    拼多多店铺活跃度一般指的是什么(拼多多店铺活跃度低是怎么回事)

  • 微信收取中一直转圈圈(微信收取一直转)

    微信收取中一直转圈圈(微信收取一直转)

  • vb中str什么意思(vb str函数)

    vb中str什么意思(vb str函数)

  • 拉黑的电话号码在哪里可以找到(拉黑的电话号码打过去对方知道吗)

    拉黑的电话号码在哪里可以找到(拉黑的电话号码打过去对方知道吗)

  • 微博怎么不显示年龄(微博怎么不显示ip地址)

    微博怎么不显示年龄(微博怎么不显示ip地址)

  • soul自闭中是什么意思(soul自闭模式别人会看到我吗)

    soul自闭中是什么意思(soul自闭模式别人会看到我吗)

  • 5g手机是不是更费流量(5g手机是不是更耗电)

    5g手机是不是更费流量(5g手机是不是更耗电)

  • word表格两页合并一页(word两页表格合并)

    word表格两页合并一页(word两页表格合并)

  • 苹果dfu怎么进(苹果dfu怎么进入)

    苹果dfu怎么进(苹果dfu怎么进入)

  • 华为nova4超广角在哪(nova4广角多少度)

    华为nova4超广角在哪(nova4广角多少度)

  • 华为广角镜头怎么开(华为广角镜头怎么选择超级广角)

    华为广角镜头怎么开(华为广角镜头怎么选择超级广角)

  • 淘宝店怎么参加双11(淘宝店怎么参加双11活动)

    淘宝店怎么参加双11(淘宝店怎么参加双11活动)

  • 拼多多拼单购买是什么意思(拼多多拼单购买和单独购买的区别)

    拼多多拼单购买是什么意思(拼多多拼单购买和单独购买的区别)

  • 投影仪不显示电脑画面(投影仪不显示电脑桌面内容怎么设置)

    投影仪不显示电脑画面(投影仪不显示电脑桌面内容怎么设置)

  • 抖音卸载后原账号在吗(卸载后抖音怎么恢复以前的抖音号)

    抖音卸载后原账号在吗(卸载后抖音怎么恢复以前的抖音号)

  • tp link id是什么意思(TP LINK ID是什么)

    tp link id是什么意思(TP LINK ID是什么)

  • vivox9s红外被遮挡怎么解决(vivo的红外线被遮挡有什么用)

    vivox9s红外被遮挡怎么解决(vivo的红外线被遮挡有什么用)

  • 苹果max耳机插孔在哪(苹果max的耳机插口在哪)

    苹果max耳机插孔在哪(苹果max的耳机插口在哪)

  • 应补退税额较少是什么意思
  • 企业借出去的钱收不回来
  • 唐朝的两税法是什么
  • 中华人民共和国国歌
  • 特许权使用费收入
  • 包工包料怎么开税票合适
  • 百分百控股的企业是否负连带责任
  • 应收票据贷方余额怎么办
  • 网线的税收编码是多少
  • 房产税和城市房地产税
  • 材料委托加工
  • 工会经费和职工教育经费比例
  • 库存盘盈盘亏按进价还是售价
  • 固定资产原值减少账务处理
  • 代垫款收到的发票在哪里
  • 审计调整坏账后什么时候回冲分录?
  • 个体工商户的生产、经营所得
  • 税务局开票需要带什么材料
  • 利税总额为负数如何表述出来
  • 小规模商贸公司成本核算方法
  • 小规模纳税人咨询服务费税率是多少
  • 企业报税网上申报
  • 现金福利需要发票吗
  • 收到投资款不做资本可以做什么?
  • 初级备考计划表
  • 旅行社开具的发票能否作废
  • 软件企业即征即退例题
  • 中央空调使用费怎么开发票
  • 赠送算商业用途吗
  • 办理银行承兑汇票贴现的会计分录
  • 电脑更改工作组后进不了系统
  • 应交增值税的结转
  • 惠普笔记本电源适配器
  • 鸿蒙系统怎样开启5G
  • 000.exe病毒
  • iphone助手
  • php在apache中有哪些工作方式
  • apache配置多个项目
  • 房地产开发间接费
  • redux-tookit
  • 2023跨年代码大全可复制免费
  • php远程调用
  • 固定资产年限折旧方法
  • 出版社出版带有编码吗
  • 装修消防改造费用会计分录
  • 应付利息什么时候确认收入
  • sql server 2008 r2 express 精简版与企业版的区别
  • 总账和明细账有那些
  • 高新技术企业研发费用占比要求
  • 小规模纳税人什么时候用3%什么时候用5%
  • 开出银行转账支票
  • 收到对公打款认证怎么入账
  • 新注册企业实收资本没到账怎么处理
  • 暂估的应付账款需要调整报表吗
  • 公司的软件服务器设置什么意思啊
  • 公司的日常费用支出能税前全部扣除吗?
  • 员工体检费计入什么会计科目里
  • 什么是履约义务,举例
  • 运维过程
  • 清理c盘清理
  • centos7如何设置固定ip
  • puppset
  • win7系统磁盘分区必须分区为什么才能安装
  • win7任务管理器怎么调回原来样子
  • win10系统登录密码忘了怎么办
  • unity项目资源
  • java 解析javascript
  • 中国现在很多网站
  • 简介英文
  • unity3d网络游戏开发
  • 内存优化有哪些方法
  • unity接入安卓sdk
  • 网页的子页面
  • jquery实现点击按钮
  • 房产的原值以什么为准
  • 重庆地方税务局发票查询
  • 广东省电子税务局登录方式
  • 小规模纳税人个税税率
  • 电子税务局密钥不一致
  • 工商注册app是不是在手机上可以完全操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设