vue中实现将html导出为word文档

这篇具有很好参考价值的文章主要介绍了vue中实现将html导出为word文档。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:将页面整成理想样式,将想要的那一部分页面导出成word,不用写模板,按照当前页面样式导出即可。(简易版)

保姆级别教程:

第一步:安装需要的依赖

npm install html-docx-js -S

npm install file-saver -S

第二步:给导出那部分的容器起个id名

<el-dialog
        width="40%"
        title="行程信息"
        :visible.sync="innerVisible"
        append-to-body
      >
    <div id="myContainer">
    <!-- 此处省去一万字 -->
    </div>
</el-dialog>

第三步:在需要的地方引入依赖

import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";

第四步:获取dom节点myContainer并导出(我写的行内样式)

/**导出data */
    exportWord() {
      let contentHtml = document.getElementById("route-detail").innerHTML;
      let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	            </head>
	            <body>
	                <div>
                  		${contentHtml}
                	</div>
	            </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, "行程" + this.form.tripName + ".docx");
    },

vue中实现将html导出为word文档

 最终效果:

预览:vue中实现将html导出为word文档

 导出word:

vue中实现将html导出为word文档文章来源地址https://www.toymoban.com/news/detail-509136.html

到了这里,关于vue中实现将html导出为word文档的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue导出word文档(含ECharts,多图片,表格等)

    package.json 安装文件包      1.导入插件包   2.初始化echarts图表时  将echarts图片转为base64格式(为后续导出准备)   3.导出echarts图片,格式转换,官方自带,不需要修改  4.导出word 具体实现方法(包含发邮件,上传到服务器) 5.word文档模板 效果图:       1.如果有将文件流

    2024年02月13日
    浏览(41)
  • vue前端实现导出页面为word(两种方法)

    注意:在当前页面引入依赖 注意:如果导出的时候出现bug,大多是因为文件路径引入有问题,再次排查路径引入

    2024年04月25日
    浏览(40)
  • VUE框架中实现HTML页面(局部)内容转PDF下载

    有一朋友想把网页内容变成PDF下载下来。问我有没有好办法。 这还真巧了,咱公司也有这个需求,就是网页生成合同,然后可以直接打印合同内容。最早吧,就是可以直接打印就好了。 当时为解决完美打印的问题,挺费劲的,当时第三方插件还有BUG(当然把解决放给发给作

    2023年04月14日
    浏览(55)
  • Vue3——html-doc-ja(html导出为word的js库)

    官方地址  html-doc-js - npm 在 exportWord 方法执行时,将页面中mjx-assistive-mml 节点清除即可,如下图所示

    2024年04月14日
    浏览(39)
  • 若依vue 多table前端HTML页面导出一张Excel表

    导入依赖,具体前端vue配置就不介绍了,直接晒具体细节代码 js代码 点个赞吧!

    2024年02月15日
    浏览(54)
  • aspose-words按需求导出图像

    使用aspose-words时,经常会遇到需要导出文档中所有图片,或者按需求导出特定图片的需求。使用 Aspose.Words API,这项任务变得很简单,它已经提供了提取和保存图像数据的功能, 但是,有时可能想要类似地 提取由不同类型的绘图对象表示的其他类型的图形内容 ,例如包含段

    2024年02月22日
    浏览(49)
  • 前端vue基于html2canva jspdf 实现前端页面加水印 并导出页面PDF

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月03日
    浏览(45)
  • vue2如何将页面生成 pdf 导出 html2Canvas + jspdf

    npm i html2canvas npm i jspdf import html2canvas from \\\'html2canvas\\\'; import jsPDF from \\\'jspdf\\\' export const htmlToPDF = async (htmlId, title = \\\"报表\\\", bgColor = \\\"#fff\\\") = {   let pdfDom = document.getElementById(htmlId)   pdfDom.style.padding = \\\'0 10px !important\\\'   const A4Width = 595.28;   const A4Height = 841.89;   let canvas = await html2canvas(pd

    2024年02月16日
    浏览(54)
  • java 导出word,java根据提供word模板导出word文档

    本文主要讲解,利用poi-tl在word中动态生成表格行,进行文字、图片填充。一共提供了两种方式,1.基于本地文件 2.基于网络文件 本文讲解思路,1.先看示例,2. 示例对应的代码展示 3. 基本概念讲解(api自行查阅文档)。 这样便于快速展示,不符合你的业务需求的可以直接划走

    2024年02月14日
    浏览(40)
  • java利用模板导出word文档

    1.依赖: 1.普通数据 2.表格 3.1编辑模板:选中区域,按ctrl+F9,右键编辑域,选择邮件合并,输入参数 参数后面加“!”可以避免参数为null而报错,  3.2.代码:  3.3展示 1.数据类型 布尔型:等价于java的Boolean类型,不同的是不能直接输出,可转化为字符串输出 日期型:等价于

    2024年02月04日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包