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

  • 红米k50至尊版怎么关闭按键声音(红米k50至尊版怎么样)

    红米k50至尊版怎么关闭按键声音(红米k50至尊版怎么样)

  • 健康码接龙怎么在微信接龙(健康码接龙怎么在qq接龙)

    健康码接龙怎么在微信接龙(健康码接龙怎么在qq接龙)

  • 支付宝定时转账怎么设置(支付宝定时转账怎么取消)

    支付宝定时转账怎么设置(支付宝定时转账怎么取消)

  • appstore怎么取消自动续费(appstore怎么取消按两下)

    appstore怎么取消自动续费(appstore怎么取消按两下)

  • 荣耀30s与华为nova7的区别(荣耀30s与华为nova7p ro的区别)

    荣耀30s与华为nova7的区别(荣耀30s与华为nova7p ro的区别)

  • 电脑版WPS循环放映方式怎么设置(电脑版wps循环放大怎么弄)

    电脑版WPS循环放映方式怎么设置(电脑版wps循环放大怎么弄)

  • qq能通过通讯录发信息吗(qq通过通讯录添加好友对方知道吗)

    qq能通过通讯录发信息吗(qq通过通讯录添加好友对方知道吗)

  • 健康码通过什么定位(健康码通过什么记录行程的)

    健康码通过什么定位(健康码通过什么记录行程的)

  • 苹果手机wifi信号弱怎么调(苹果手机wifi信号满格但网速慢)

    苹果手机wifi信号弱怎么调(苹果手机wifi信号满格但网速慢)

  • 抖音不允许在车上直播吗(抖音视频不让上dou+)

    抖音不允许在车上直播吗(抖音视频不让上dou+)

  • 华为p40出厂屏幕有贴膜吗(p40原装屏幕)

    华为p40出厂屏幕有贴膜吗(p40原装屏幕)

  • 荣耀30屏幕多少HZ(荣耀30屏幕多少寸)

    荣耀30屏幕多少HZ(荣耀30屏幕多少寸)

  • 苹果11怎么定时开关机(苹果11怎么定时关闭软件)

    苹果11怎么定时开关机(苹果11怎么定时关闭软件)

  • 抖音怎么删除失效的视频(抖音怎么删除失效收藏)

    抖音怎么删除失效的视频(抖音怎么删除失效收藏)

  • 华为手机有个眼睛的符号是什么(华为手机有个眼睛里面有个月亮)

    华为手机有个眼睛的符号是什么(华为手机有个眼睛里面有个月亮)

  • b站怎么自动播放下一个视频(B站怎么自动播放合集)

    b站怎么自动播放下一个视频(B站怎么自动播放合集)

  • 手机拍的照片是jpg格式吗(手机拍的照片是电子档吗)

    手机拍的照片是jpg格式吗(手机拍的照片是电子档吗)

  • 怎么安装解压软件(如何安装解压软件)

    怎么安装解压软件(如何安装解压软件)

  • word怎么弄行数(word行数怎么设置)

    word怎么弄行数(word行数怎么设置)

  • 苹果x摄像头多少像素(苹果x摄像头多少倍)

    苹果x摄像头多少像素(苹果x摄像头多少倍)

  • 淘宝商品界面怎么变了(淘宝商品界面怎么调回原来的样子)

    淘宝商品界面怎么变了(淘宝商品界面怎么调回原来的样子)

  • 共享单车的卫星定位在哪里(共享单车卫星定位在什么位置装着)

    共享单车的卫星定位在哪里(共享单车卫星定位在什么位置装着)

  • 趣分类怎么注销账号(趣分类已经注册过得怎么下载)

    趣分类怎么注销账号(趣分类已经注册过得怎么下载)

  • 手机信号上的hd是什么意思(手机信号上的hd啥意思)

    手机信号上的hd是什么意思(手机信号上的hd啥意思)

  • 三种安卓手机系统升级方法教程(安卓系统详解)

    三种安卓手机系统升级方法教程(安卓系统详解)

  • 蒙特勒和日内瓦湖,瑞士 (© Westend61/Getty Images)(蒙特勒和日内瓦的关系)

    蒙特勒和日内瓦湖,瑞士 (© Westend61/Getty Images)(蒙特勒和日内瓦的关系)

  • 城建税会计分录怎么写
  • 什么是税收制度构成要素的中心环节
  • 税后净利润怎么算股价
  • 盖了骑缝章的合同怎么写
  • 毛利率在餐饮中表示什么意思?
  • 出库单上面的单位写谁的
  • 新公司成立第一次会议
  • 制造业三项费用占比行业怎么算
  • 电信充值调账什么意思
  • 债权投资损失准备
  • 顾客退货补差价怎么做账?
  • 调试阶段是什么意思
  • 单位月工资总额
  • 招待费与去年减少的原因
  • 无形资产研究费用计入成本么
  • 退预付账款会计分录
  • 利息收入汇算清缴
  • 农民专业合作社普通发票抵扣
  • 福利费开专票怎么处理
  • 水利建设基金的缴费基数是什么
  • 当期净资产收益率怎么算
  • 工程款发票备注栏必须填写吗
  • 预交印花税会计分录
  • 购买使用过的固定资产如何计提折旧
  • 大巴车票抵扣税率
  • 差旅费进项可以跨月抵扣吗
  • 少付的运费如何做分录
  • 4s店修车送保养
  • 鼠标灯亮但是鼠标失灵
  • 所得税汇算清缴退税会计分录怎么做
  • 如何启用系统引擎
  • 企业收到的保险理赔款会计分录
  • 企业所得税的税收筹划
  • 暂估纳税调增了账务怎么处理
  • 施工企业会计核算特点有哪些
  • 增值税加计抵减企业所得税如何处理
  • opencv识别车牌
  • ip和以太网的区别
  • windows history命令
  • 递延所得税资产和所得税费用的关系
  • 支付股息如何做账
  • 股东借款作为项目投入的依据
  • 账实不符的后果和对策
  • 红字发票什么意思怎么做账
  • 员工话费报销制度
  • 失控发票多久能查出
  • 结转完工入库产品成本的会计分录
  • 商场收租户电费会计分录
  • 备用金取多少钱会被监控
  • 交通运输业包含
  • 支付给个人的劳务费需要发票吗
  • mysql查询分组后 组内数据
  • windows隐藏文件名
  • win2003回收站
  • ubuntu20.04挂载
  • debian10.6安装教程
  • linux nls
  • win7右下角提示测试模式
  • wfxctl32.exe - wfxctl32是什么进程
  • windowsxp文件夹里面的文件突然消失
  • ubuntu14.04启动不了
  • linux 下MySQL服务器的启动与停止
  • win10开机自动弹出设置界面
  • xp死机不动
  • ubuntu x
  • reader_sl.exe - reader_sl进程有什么用.
  • window102021年更新计划
  • Win8系统创建VPN虚拟网络连接的技巧
  • win8突然没有声音
  • win8兼容性比win7好吗
  • win7耳机和外放一起响
  • android基础入门教程
  • python怎么输出日志
  • vue只适合做单页项目吗
  • fullpage.js教程
  • android 系统app权限
  • 用yum安装samba
  • unity3d游戏开发笔记本推荐
  • 财政拨款是否需交税
  • 资源税的税目有7个,其中不包括
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设