word打印---doc转html后进行打印,window.print、print-js、vue-print-nb
提示:word预览方式—插件
文章目录
- @[TOC](文章目录)
- 前言
- 一、vue-office-docx把docx转换html
- 二、调取window.print
- 三、print-js
- 四、vue-print-nb
- 总结
文章目录
- @[TOC](文章目录)
- 前言
- 一、vue-office-docx把docx转换html
- 二、调取window.print
- 三、print-js
- 四、vue-print-nb
- 总结
前言
word预览
一、vue-office-docx把docx转换html
npm install vue-office-docx -S-D
officeDocx.vue
<template><div class="preview_box"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})}}}</script><style scoped></style>
样式还原度一般,间距太大,分页也有问题
二、调取window.print
officeDocx.vue
<template><div class="preview_box" ><div class="preview_print_btn" @click="printHTML">打印</div><div ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,// src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},printHTML(){// 新建窗口const win = window.open('','_blank');// 把要打印的html写入新窗口win.document.write(this.$refs.printBoxRef.innerHTML);// 调起浏览器打印win.window.print();// 关闭新窗口win.window.close(); },}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
</style>
预览有问题,打印也有问题
三、print-js
npm install print-js -S-D
officeDocx.vue
<template><div class="preview_box" ><div class="preview_print_btn" @click="printHTML">打印</div><div ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';import printJS from 'print-js'export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`https://iteachcdn.test.xdf.cn/doc/111f92d3d71f471db47a4cb88b425d71.docx`,// src:`.docx文件rul`,htmlContent:''}},mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},printHTML(){printJS({printable: this.$refs.printBoxRef,type: 'html',targetStyles: ['*']}); },}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
</style>
打印样式相对好一些,但是分页有问题
四、vue-print-nb
npm install vue-print-nb -S-D
officeDocx.vue
<template><div class="preview_box" ><div class="preview_print_btn" v-print="printobj">打印</div><div id="printBox" ref="printBoxRef"><VueOfficeDocx :src="htmlContent"></VueOfficeDocx></div></div></template><script>import axios from 'axios'import VueOfficeDocx from '@vue-office/docx'//引入相关样式import '@vue-office/docx/lib/index.css';import Print from 'vue-print-nb';export default {name: 'preview',components:{VueOfficeDocx},data () {return {src:`.docx文件rul`,htmlContent:'',printobj: {id: "printBox",popTitle: '标题',extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",extraHead: '<meta http-equiv="content-language" content="zh-cn" />',beforeOpenCallback(vue) {console.log('调起打印弹窗之前');},openCallback(vue) {console.log('调起打印弹窗');}}}},directives: { Print },mounted(){this.docToHtml();},methods: {docToHtml(){axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{this.htmlContent = res.data;})},}}</script>
<style scoped>
.preview_print_btn{height: 32px;line-height: 32px;background: #0e7a38;color: #fff;text-align: center;
}
@media print {@page {size: auto;margin: 3mm;}body {height: auto;}
}
</style>
打印样式也有问题
综上:word转html后进行打印方式存再问题,不建议使用
总结
踩坑路漫漫长@~@
相关文章:

word打印---doc转html后进行打印,window.print、print-js、vue-print-nb
提示:word预览方式—插件 文章目录 [TOC](文章目录) 前言一、vue-office-docx把docx转换html二、调取window.print三、print-js四、vue-print-nb总结 前言 word预览 一、vue-office-docx把docx转换html npm install vue-office-docx -S-DofficeDocx.vue <templ…...

CTF学习笔记汇总(非常详细)零基础入门到精通,收藏这一篇就够了
CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下: 01 对外网、服务器所在内网、本地进行端口扫描,获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别,识别企业内部的资产信息。 …...
如果想不明白,那就读书吧
人生起伏是常态,平平淡淡的日子亦是常态,但是在常态中的普通人往往面对着各种各样的风险和挑战,稍有不慎,生活天翻地覆。 回到现在这家公司是一次吃回头草的过程,其中亦是一次生活的坎坷,祸福相伴。来公司…...

Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签
本教程主要实现【Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签】。 本文源码:https://gitee.com/songfayuan/go-zero-demo 教程源码分支:master 分支(_examples/word-template/fill-word-template.go&…...

PHP学习:PHP基础
以.php作为后缀结尾的文件,由服务器解析和运行的语言。 一、语法 PHP 脚本可以放在文档中的任何位置。 PHP 脚本以 <?php 开始,以 ?> 结束。 <!DOCTYPE html> <html> <body><h1>My first PHP page</h1><?php …...

Xinstall新玩法:Web直接打开App,用户体验再升级!
在移动互联网时代,App已成为我们日常生活中不可或缺的一部分。然而,在App推广和运营过程中,许多开发者面临着从Web端引流到App的难题。这时,Xinstall作为国内专业的App全渠道统计服务商,提供了一种创新的解决方案——通…...
perf 排查高延迟
高延迟的 2 个场景,触发 perf 录包思路 当前 perf 没有常驻内存,后续提供 perf 常驻内存功能。且 perf 启动需要 0.5~1s,所以,存在 2 个场景 1.频繁连续高延迟(复现后的几秒内,继续频繁复现)&a…...

配置8188eu无线网卡的热点模式
下载驱动 github:8188eu的最新驱动,注意下载5.2.2.4分支 关于这一驱动,不要下载master分支,master分支代码较早,会导致以下两点问题: 1.STA模式下连接wifi信号较差时会卡死 2.无法启动AP模式 所以请务必下载5.2.2.4分…...
为什么 DDoS 攻击偏爱使用 TCP 和 UDP 包?
Distributed Denial of Service (DDoS) 攻击是指攻击者利用多个计算机系统或网络设备(通常是被恶意软件感染的计算机,被称为“僵尸网络”)来淹没目标服务器的资源,导致合法用户无法访问服务。TCP 和 UDP 是两种最常见的用于 DDoS …...

多址技术(FDMA,TDMA,CDMA,帧,时隙)(通俗易懂)
多址技术是一种区分用户的技术。 举个例子,一个基站发出信息,如何确定是发给谁的? 这个技术就是解决这个问题的。 多址技术常见的有三种: 频分多址(FDMA)、时分多址(TDMA)、码分…...

基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析
转载:基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析 前言 导图 1. 简介 1.1 架构概要说明 今天分享一个实际小规模生产环境部署架构设计的案例,该架构设计概要说明如下: 本架构设计适用于中小规模(<50)的 Kubernetes …...

RabbitMQ 入门篇
接上一篇《RabbitMQ-安装篇(阿里云主机)-CSDN博客》 安装好RabbitMQ后,我们将开始RabbitMQ的使用,根据官网文档RabbitMQ Tutorials | RabbitMQ,我们一步一步的学习。 1. "Hello World!" 这里先说明几个概…...

【赛事】2024第五届“华数杯”全国大学生数学建模竞赛
为了培养学生的创新意识及运用数学方法和计算机技术解决实际问题的能力,天津市未来与预测科学研究会、中国未来研究会大数据与数学模型专业委员会(协办)决定举办华数杯全国大学生数学建模竞赛。竞赛的目标是为培养大学生的科学精神及运用数学…...

DB管理客户端navicat、DBever、DbVisualizer数据库连接信息迁移
DB管理客户端Navicat、DBever、DbVisualizer数据库连接信息迁移 第三方数据库连接工具为了确保数据库信息安全通常对保存的数据库连接密码进行加密,填入后想再拿到原文就不可能了,有时交接给别人或者换电脑时可以通过连接数据导出的方式来解决。 Navic…...
CF 训练2
688 div2 C Balanced Bitstring 思路:首先对于区间问题 , 我们可以先思考让它滑动滑动。对于[l,r],向后滑动一位后 ,[l1 , r1],因为两次的区间中 , [l1 ,r]中所有数都是相同的 , 所以 可以得到s[l] s[r1] ࿰…...

内网隧道学习笔记
1.基础: 一、端口转发和端口映射 1.端口转发是把一个端口的流量转发到另一个端口 2.端口映射是把一个端口映射到另一个端口上 二、http代理和socks代理 1.http带那里用http协议、主要工作在应用层,主要用来代理浏览网页。 2.socks代理用的是socks协议、…...

Umi-OCR:功能强大且易于使用的本地照片识别软件
Umi-OCR是一款开源且免费的离线OCR(光学字符识别)软件,可让您轻松从照片中提取文本。它支持多种语言,并具有许多其他功能使其成为照片识别任务的绝佳选择。 Umi-OCR的优势 离线操作: Umi-OCR无需互联网连接即可工作&…...
HarmonyOS开发商城商品详情-底部导航
目录 一:功能概述 二:代码实现 三:效果图 一:功能概述 上一节我们实现了商品详情页基础信息展示,这一节主要实现底部立即购买和加入购物车的功能。首先我们需要在底部创建两个按钮,这两个按钮固定字底部,不随页面滚动。点击添加购物车按钮,会出现一个对话框,显示商…...

C语言 ——— 学习、使用 strcat函数 并模拟实现
目录 学习strcat函数编辑 使用strcat函数编辑 模拟实现strcat函数 学习strcat函数 strcat函数所需要的头文件: #include<string.h> strcat函数的参数解析: 将 source 字符串追加到 destination 字符串。destination 中的字符串结束标志…...

视频超压缩保持质量 ffmpeg
参考: https://x.com/mortenjust/status/1817991110544744764 基于 FFMpeg 的 H264 压缩标准,实现压缩 90% 的视频大小 在线体验地址: https://tools.rotato.app/compress ffmpeg命令执行 ffmpeg -i "C:\Users\loong\Downloads\屏幕录…...

手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...

零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...

深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...