位置: 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 下载)

  • vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

    vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

  • 抖音时空旅行多少抖币(抖音时空旅行多少票可以买)

    抖音时空旅行多少抖币(抖音时空旅行多少票可以买)

  • 苹果12轻点两下截屏怎么弄(苹果12轻点两下截屏怎么设置)

    苹果12轻点两下截屏怎么弄(苹果12轻点两下截屏怎么设置)

  • 拼多多三级限制有解除的可能吗(拼多多三级限制多久可以解封)

    拼多多三级限制有解除的可能吗(拼多多三级限制多久可以解封)

  • 数据透视表为什么有空白行(数据透视表为什么不能按月汇总)

    数据透视表为什么有空白行(数据透视表为什么不能按月汇总)

  • vivos6有红外线功能吗(vivos6红外线功能手机怎么打开)

    vivos6有红外线功能吗(vivos6红外线功能手机怎么打开)

  • oppo新机要充多久(oppo新手机第一次充电要充满8小时吗)

    oppo新机要充多久(oppo新手机第一次充电要充满8小时吗)

  • 拼多多溢价是什么意思(拼多多溢价率)

    拼多多溢价是什么意思(拼多多溢价率)

  • 计算机病毒最基本的特征(计算机病毒最基本的特征是)

    计算机病毒最基本的特征(计算机病毒最基本的特征是)

  • se2有3dtouch吗(苹果se2有3dtouch吗)

    se2有3dtouch吗(苹果se2有3dtouch吗)

  • 微信卸载重装后好友还在嘛(微信卸载重装后群聊找不到了怎么办)

    微信卸载重装后好友还在嘛(微信卸载重装后群聊找不到了怎么办)

  • 网线一般用哪几根线(网线一般用哪几芯线)

    网线一般用哪几根线(网线一般用哪几芯线)

  • 为什么vivo总安装失败(vivo手机为什么自动安装软件)

    为什么vivo总安装失败(vivo手机为什么自动安装软件)

  • 手机电池鼓起来的原因(手机电池鼓起来了还能用吗)

    手机电池鼓起来的原因(手机电池鼓起来了还能用吗)

  • 红米note8Pro大家屏幕贴膜吗(红米note8pro2021)

    红米note8Pro大家屏幕贴膜吗(红米note8pro2021)

  • 滴滴最高服务分是多少(滴滴最高服务分210)

    滴滴最高服务分是多少(滴滴最高服务分210)

  • 手机淘宝怎么找淘小二(手机淘宝怎么找回被删除的订单)

    手机淘宝怎么找淘小二(手机淘宝怎么找回被删除的订单)

  • 苹果8p的重量多少克(苹果8p手机重量是多少)

    苹果8p的重量多少克(苹果8p手机重量是多少)

  • vivoiqooneo多少w快充(iqooneo最高支持多少w的快充)

    vivoiqooneo多少w快充(iqooneo最高支持多少w的快充)

  • 苹果ios13怎么把某个app隐藏(苹果13怎么把图标放到下面)

    苹果ios13怎么把某个app隐藏(苹果13怎么把图标放到下面)

  • 苹果x有没有nfc功能(苹果手机有没有nfc)

    苹果x有没有nfc功能(苹果手机有没有nfc)

  • 红米note8有呼吸灯吗(红米note8呼吸灯颜色不能调节)

    红米note8有呼吸灯吗(红米note8呼吸灯颜色不能调节)

  • 第七代ipad上市时间(第七代ipad发布时间)

    第七代ipad上市时间(第七代ipad发布时间)

  • QQ怎么开启聊天记录漫游(qq怎么开启聊天标识)

    QQ怎么开启聊天记录漫游(qq怎么开启聊天标识)

  • 田里的拖拉机和装载着卷心菜的拖车,奥地利圣珀尔滕 (© Stephan Zirwes/Getty Images)(拖拉机拖拉机耕地)

    田里的拖拉机和装载着卷心菜的拖车,奥地利圣珀尔滕 (© Stephan Zirwes/Getty Images)(拖拉机拖拉机耕地)

  • python数据拼接如何实现(python中拼接)

    python数据拼接如何实现(python中拼接)

  • RabbitMQ个人实践

    RabbitMQ个人实践

  • 月初没报完税可以开票吗
  • 管理费用中的办公费占比是多少
  • 房地产企业实收资本要求
  • 公司卫生纸是自己带还是公司买
  • 出口退税是先交税后退税吗
  • 行政事业单位购买固定资产的流程
  • 办公费专票怎么做账
  • 以库存现金付讫
  • 低值易耗品计入什么账户
  • 手工帐怎么登记
  • 非营利性代收代付费用会计处理怎么做?
  • 商品过期可以向商家索要赔偿吗
  • 公司和个人大额往来怎么办
  • 固定资产的入账价值怎么计算
  • 如何计算一般稳定球面腔的主要参量
  • 服装外贸进出口
  • 房地产开发企业的土地使用权计入哪里
  • 利润表里的其他业务利润怎么形成的
  • 工程发票预交税金规定
  • 跨年度暂估未取得发票如何处理
  • 其他债权投资通俗
  • 销售额不到10万免征什么税
  • 土地价款扣除会计分录
  • 电脑网速不好怎么提升网速
  • win10待机久了自动关机
  • 雨林木风win10安装失败
  • 进程cmd.exe
  • 没有取得发票的成本可以税前扣除吗
  • 如何用wordpress
  • uniapp自定义组件模式
  • 劳务派遣公司的账务处理
  • php文字转语音源码
  • php数组依次排列
  • php 上传图片
  • php随机抽取
  • 任意盈余公积金的用途
  • 配置nginx支持php
  • php preg_quote
  • phpxdebug
  • uniapp 手写识别
  • 一般企业预缴税额怎么算
  • 土地增值税成本费用
  • 融资租赁手续费一次性还是摊销
  • 企业注销后还会查账吗
  • 个人独资企业可以变更法人吗?
  • 经营范围广告业务能开什么发票
  • 出差的招待费算差旅费
  • 什么叫做应税劳务
  • 股权转让产生的个人所得税
  • 履约保证金没有交足
  • 兼职人员的工资需要发票吗
  • 子公司与母公司资质能相互借用吗
  • 工程履约保证金退还申请书
  • 个贷系统平账专户A户付款会计分录
  • 合同资产结转收入
  • 结转损益利息收入贷方红字什么意思
  • 年末增值税有留底,挂在哪个科目
  • 进项票是服务费怎么做会计分录
  • 防止服务器断电
  • centosyum源
  • win7卸载程序找不到软件
  • 如何快速恢复么
  • windows7找不到无线
  • linux 消耗内存命令
  • windows7鼠标设置在哪里
  • 微软股票
  • cocos3d物理引擎
  • cocos2d-x起点之程序的入口
  • 根据两点的经纬度计算航向角
  • js隐写
  • edittext弹出软键盘
  • javascript module
  • js前端搜索功能
  • Jquery AJAX POST与GET之间的区别详细介绍
  • javascript的dom
  • js的navigator
  • 金融商品转让都包括什么
  • 国税地税发票编码查询
  • 税务局的人为什么那么拽
  • 国税和地税是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设