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

  • 钉钉暂停了算在观看时间里吗(钉钉暂停了算在打卡吗)

    钉钉暂停了算在观看时间里吗(钉钉暂停了算在打卡吗)

  • 京东plus会员7天内怎么退款(免费领京东plus会员7天)

    京东plus会员7天内怎么退款(免费领京东plus会员7天)

  • 钉钉在线课堂可以看到观看时长吗(钉钉在线课堂可以两个班一起上课吗)

    钉钉在线课堂可以看到观看时长吗(钉钉在线课堂可以两个班一起上课吗)

  • 为什么买票身份验证失败(为什么买票身份待核验)

    为什么买票身份验证失败(为什么买票身份待核验)

  • 电脑启动不了灯一闪一闪的(电脑启动不亮灯)

    电脑启动不了灯一闪一闪的(电脑启动不亮灯)

  • r17耗电快怎么解决(r17掉电快)

    r17耗电快怎么解决(r17掉电快)

  • ipad插卡版插什么卡(ipad插卡版叫什么名字)

    ipad插卡版插什么卡(ipad插卡版叫什么名字)

  • 淘宝开团提醒什么意思(淘宝里的开团提醒在哪儿)

    淘宝开团提醒什么意思(淘宝里的开团提醒在哪儿)

  • 为什么主机开了显示屏没反应(为什么主机开了键盘鼠标没反应)

    为什么主机开了显示屏没反应(为什么主机开了键盘鼠标没反应)

  • 键盘是输入还是输出设备(键盘输入属于什么输入方式)

    键盘是输入还是输出设备(键盘输入属于什么输入方式)

  • 打印机需要网络接口吗(打印机需要网络密码)

    打印机需要网络接口吗(打印机需要网络密码)

  • ups主机是什么(ups是什么机器)

    ups主机是什么(ups是什么机器)

  • 华为nova5和nova6se的区别(华为nova5和nova5i的区别)

    华为nova5和nova6se的区别(华为nova5和nova5i的区别)

  • 手机上出现hd是怎么回事(手机上出现HD是什么情况怎么取消)

    手机上出现hd是怎么回事(手机上出现HD是什么情况怎么取消)

  • 手机语音报时怎么设置(智能手机语音报时)

    手机语音报时怎么设置(智能手机语音报时)

  • 苹果24小时怎么设置(苹果24小时怎么弄)

    苹果24小时怎么设置(苹果24小时怎么弄)

  • vsco怎么注销用户(如何注销vsco)

    vsco怎么注销用户(如何注销vsco)

  • 荣耀20支持快充吗(荣耀20支持快充不)

    荣耀20支持快充吗(荣耀20支持快充不)

  • 读取已安装应用列表什么意思(读取已安装应用信息要关闭吗)

    读取已安装应用列表什么意思(读取已安装应用信息要关闭吗)

  • 鼠标坏了怎么修

    鼠标坏了怎么修

  • iphone应用与数据在哪(iphone应用数据备份)

    iphone应用与数据在哪(iphone应用数据备份)

  • y93和y93s有什么区别(y93和y93s外观咋样区别)

    y93和y93s有什么区别(y93和y93s外观咋样区别)

  • 趣步交换密码怎么设置(趣步交换密码怎么取消)

    趣步交换密码怎么设置(趣步交换密码怎么取消)

  • 8p双卡双待吗(iphone 8p 双卡双待)

    8p双卡双待吗(iphone 8p 双卡双待)

  • oppor17可以无线充电吗(oppor17手机支不支持无线充电)

    oppor17可以无线充电吗(oppor17手机支不支持无线充电)

  • 波尔图,葡萄牙 (© Kanuman/Shutterstock)(波尔图葡萄牙语)

    波尔图,葡萄牙 (© Kanuman/Shutterstock)(波尔图葡萄牙语)

  • OpenCV实战(16)——角点检测详解(opencv实战项目教程)

    OpenCV实战(16)——角点检测详解(opencv实战项目教程)

  • python中Box-Cox变换是什么(python cox)

    python中Box-Cox变换是什么(python cox)

  • 单独确认进项税额的情形
  • 零报税有风险吗
  • 所得税五个年度纳税弥补是如何算的?
  • 普票能抵扣多少
  • 发票金额多开了有事吗
  • 加计抵减税金分录
  • 其他收入月末需要结账吗
  • 多缴的企业所得税办理退税怎么处理
  • 出口增值税发票金额怎么开
  • 贴现费用计算公式
  • 出现销项负数
  • 代征手续费返还
  • 发给一个人的说说
  • 购买车间用的材料怎么做分录
  • 外贸企业当期认证的发票没申报影响退税吗?
  • 发票认证了但是没记账
  • 调整以前年度应交税费分录
  • 住宿专票怎么入账
  • 物业公司营改增后收入的确认
  • 应付未付的款项怎么写凭证
  • 装修费用如何做分录
  • 长期股权投资减值准备是什么意思
  • 税控盘服务费申报是在哪里填写
  • 斐讯路由器地址在哪里看
  • 汇兑损益怎么记账
  • 域名怎么交费
  • PHP:pg_options()的用法_PostgreSQL函数
  • php

  • 企业发行股票的会计分录
  • pnp算法简介与代码解析
  • 工程结算在资产负债表中哪个科目显示
  • 如何在vue项目中禁止谷歌浏览器改变网页颜色
  • vue使用什么语言
  • java面试题及答案下载
  • es6体验
  • opengl设置
  • 收支比是收入比还是利润
  • 电子税务局里的自然人是什么意思
  • 私人打款到对公账户要交税吗
  • 离职员工的个税忘记申报了补申报会被处罚吗
  • 装修公司开增值税专用发票几个点
  • 资信证明好开吗
  • 增值税发票相关罪名
  • 国际货运代理需要什么样的人才
  • sql server2014教程
  • 发票的类型分为哪几类
  • 所得税申报表的营业成本包括哪些
  • 企业现金购货限额
  • 固定资产残值怎么做账务处理
  • 房租已付未收发票可以待摊费用吗
  • 建筑业发票的相关要求
  • 一般纳税人企业所得税政策最新2023
  • 红字信息表状态b900077
  • 企业控股情况怎么看
  • 安装sqlserver2000 IP地址出错怎样修改
  • sql server连接不上服务器怎么办
  • mysql字符集的作用
  • ubuntu12.04.5安装教程
  • 组策略禁用u盘怎么打开
  • win8如何更新驱动
  • windos8怎么样
  • linux系统硬盘分区类型
  • win10系统怎么设置屏幕保护
  • 前端获取http状态码400的返回值实例
  • cocos2djs
  • node.js的express
  • css条件语句
  • typescript尖括号
  • js定时器的两种方法
  • win7怎么设定关机时间
  • jquery给复选框赋值
  • unity怎么设置多个关卡
  • unity3d怎么做动画
  • angular卸载
  • boostrapping
  • 宁波市税务网上营业厅
  • 税务部门督查内审部门监督检查的内容
  • 物业公司收取物业费要交税吗
  • 发票专用章盖在哪里
  • 如何查询公司的营业执照
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设