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

  • 企业怎样通过微博推广转化为用户的购买行为(企业怎样通过微信转账)

    企业怎样通过微博推广转化为用户的购买行为(企业怎样通过微信转账)

  • 怎么找回手机相册里删除的照片(怎么找回手机相册里删除的照片安卓)

    怎么找回手机相册里删除的照片(怎么找回手机相册里删除的照片安卓)

  • au怎么提取干净的人声(au如何提取音乐伴奏)

    au怎么提取干净的人声(au如何提取音乐伴奏)

  • 白条可以扫码付款吗(白条扫码付款被限制)

    白条可以扫码付款吗(白条扫码付款被限制)

  • 腾讯会议怎么看别人云录制(腾讯会议怎么看回放?)

    腾讯会议怎么看别人云录制(腾讯会议怎么看回放?)

  • 怎么看nba直播(电视上怎么看NBA直播)

    怎么看nba直播(电视上怎么看NBA直播)

  • vivox50电池多少毫安(vivox50电池多大容量)

    vivox50电池多少毫安(vivox50电池多大容量)

  • 电池健康度83%要换吗(电池健康度83%要换吗华为手机)

    电池健康度83%要换吗(电池健康度83%要换吗华为手机)

  • 双十一能退货退款吗(双十一退货退款时已抵扣红包怎么办)

    双十一能退货退款吗(双十一退货退款时已抵扣红包怎么办)

  • word添加编号怎么设置(word里面添加编号怎么设置)

    word添加编号怎么设置(word里面添加编号怎么设置)

  • 请问华为平板怎么截屏(请问华为平板怎么录屏)

    请问华为平板怎么截屏(请问华为平板怎么录屏)

  • 华为屏幕保修时间多久(华为屏幕保修时间查询)

    华为屏幕保修时间多久(华为屏幕保修时间查询)

  • 苹果se和苹果6对比(苹果se和苹果6对比哪个好)

    苹果se和苹果6对比(苹果se和苹果6对比哪个好)

  • 苹果系统安装出错怎么回事(安装苹果系统出错)

    苹果系统安装出错怎么回事(安装苹果系统出错)

  • 华为手机没电了,充电开不了机怎么办(华为手机没电了怎么找到手机)

    华为手机没电了,充电开不了机怎么办(华为手机没电了怎么找到手机)

  • 手机闹铃为什么到时间不响(手机闹铃为什么有时候会不响)

    手机闹铃为什么到时间不响(手机闹铃为什么有时候会不响)

  • imie是什么意思(imed是什么意思)

    imie是什么意思(imed是什么意思)

  • 主存储器和辅存储器区别(主存储器和辅存器的区别)

    主存储器和辅存储器区别(主存储器和辅存器的区别)

  • wps查找功能在哪(wps查找功能在哪里替换出来)

    wps查找功能在哪(wps查找功能在哪里替换出来)

  • 淘宝动态评分多久更新(淘宝动态评分多久清零)

    淘宝动态评分多久更新(淘宝动态评分多久清零)

  • 华为亲情关怀怎么没了(华为亲情关怀怎么下载)

    华为亲情关怀怎么没了(华为亲情关怀怎么下载)

  • iphone8plus是几核(苹果8p几核)

    iphone8plus是几核(苹果8p几核)

  • word如何设置每页固定行数(word如何设置每行28字)

    word如何设置每页固定行数(word如何设置每行28字)

  • 建议快捷指令怎么删除(建议快捷指令怎么打开)

    建议快捷指令怎么删除(建议快捷指令怎么打开)

  • 【工作流Activiti7】3、Activiti7 回退与会签(工作流activity)

    【工作流Activiti7】3、Activiti7 回退与会签(工作流activity)

  • win10护眼色怎么设置(windows10护眼色设置)

    win10护眼色怎么设置(windows10护眼色设置)

  • mysql常见的备份方法(mysql的备份方式)

    mysql常见的备份方法(mysql的备份方式)

  • 待抵扣进项税额转入进项税额
  • 个所税包括什么
  • 企业所得税本年实际缴纳不包括上年汇算清缴补缴税款吗
  • 企业的所得税
  • 餐饮注册个体工商户还是注册公司
  • 小规模纳税人季报是哪几个月
  • 固定资产的维护费计入什么科目
  • 签证费怎么支付
  • 不在境内劳务是否付企业所得税
  • 小规模纳税人开普票免税
  • 佣金支出和手续费税前扣除相关政策依据及会计处理
  • 土地流转承包费拖欠
  • 漏提折旧可以所得税扣除吗
  • 核定征收的个人所得税怎么申报
  • 拒绝税务检查的情形
  • 支付给供应商的现金属于什么活动
  • 公司为员工负担个税怎么做账
  • 如果当月增值税进项比销项多怎么结转
  • 收到租金税率
  • 法院收到诉讼费多久可以收到传票
  • 电脑删文件需要授权
  • 预付账款可以为负吗
  • 如何在苹果电脑上删除软件
  • 公司固定资产出售给个人
  • 接待客人后的感受和过程
  • linux中cw
  • 劳动合同到期补偿金怎么算
  • 股权交易的重要性
  • 巨浪向我冲来改为拟人句
  • 税务的基本职能
  • 合法票据的有哪些
  • 了解的反义词
  • 小企业会计准则2023电子版
  • 在高地陶恩山脉的滑雪旅行,奥地利巴德加斯坦 (© RooM the Agency/Alamy)
  • 树枝上停着一只什么小鸟
  • 药品进销差价的计算公式
  • 材料成本差异的会计分录
  • linux杀死程序
  • 命令查看系统信息
  • python的series
  • 季初从业人数和季末从业人数怎么填
  • 农民专业合作社名词解释
  • python模块的搜索路径
  • 货币基金分红交多少税
  • 增值税附加申报表怎样填小规模
  • access 运行sql
  • 股利分配是什么科目
  • 房产税应纳税额计算例题
  • 什么叫转让财产收入
  • 装修费用摊销的会计分录怎么写
  • 主营业务收入在借方表示什么
  • 个体户生产经营所得税减半征收
  • 去年的凭证今年未入账
  • mysql数据库中关于作为临时
  • mysql 授权命令
  • vs 2008
  • debian系统如何安装软件
  • ubuntu更新软件
  • kvm虚拟化网络配置
  • auto mac
  • windows8怎么设置锁屏时间
  • linux 如何查看
  • win7旗舰版安装教程u盘
  • win7怎么安装网络驱动程序
  • 简单解析空中三角测量的意义
  • 解决胃胀气最快方法
  • angular页面加载完后执行方法
  • 安卓关键词覆盖
  • 安卓api中文手册
  • linux安全加固的内容是什么
  • shell脚本自动化
  • 深入python3
  • 控制游戏类型
  • js function函数
  • 沉浸式状态栏xposed模块
  • 打印个人住房信息查询记录需要什么资料
  • 国税和地税现在合并了吗
  • 福建地税网上办事大厅
  • 厂房房产税2021年税率
  • 国地税合并6月15日挂牌
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设