Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片：前端下载利器FileSaver

南北极之间

已于 2022-02-18 14:27:31 修改

阅读量3k

点赞数

分类专栏：前端开发文章标签：前端 vue.js html js导出word文件 js导出doc文件

于 2022-02-18 14:23:29 首次发布

本文链接：https://blog.csdn.net/qq_22182989/article/details/123001810

版权

前端开发专栏收录该内容

566 篇文章 51 订阅

订阅专栏

所有前端导入导出方法集合：

前端必备技能知识：JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)_勤动手多动脑少说多做厚积薄发-CSDN博客_js文件流导出excel表格效果：重点：a.download = '基础词库模板.xls'//这里最重要。如果不加后缀。保存的文件就会异常或者乱码。一定要写文件后缀类型 /** * 基础词库Excel导出、下载基础模板 */ exportBasicsLexiconExcel(){ this.$api .exportBasicsLexiconExcel() .then(res => { cons...https://blog.csdn.net/qq_22182989/article/details/121498487 vuejs项目纯js导出word、在线下载富文本内容或者网页另存为word文件_勤动手多动脑少说多做厚积薄发-CSDN博客vuejs项目在线下载富文本内容或者网页另存为word文件这篇文章是保存为带有原本样式文件。如果想把网页内容保存为自定义格式的word文件。可以参考我的另一篇文章：https://blog.csdn.net/qq_22182989/article/details/122605879 前端必备技能知识：vue.js操作excel表格，实现导入导出功能_勤动手多动脑少说多做厚积薄发-CSDN博客_vue前端导出excel导入导出都可以使用elementui 的组件。导入功能： <el-button type="primary" size="small" @click="uploadExcel"> <el-upload class="upload-excel" :action="actionUrl" accept="application/vnd.openxmlformats-officedocumehttps://blog.csdn.net/qq_22182989/article/details/121508652

vuejs项目前端纯js在线下载网页内容保存为自定义格式的word文件、另存为word文件_勤动手多动脑少说多做厚积薄发-CSDN博客这篇文章是把网页内容保存为自定义格式的word文件。如果想保存为带有原本样式文件。可以参考我的另一篇文章：https://blog.csdn.net/qq_22182989/article/details/122606713

https://blog.csdn.net/qq_22182989/article/details/123001810https://blog.csdn.net/qq_22182989/article/details/123001810

使用步骤

1.引入依赖包

代码如下（示例）：

npm install file-saver --save

2.在下载页面导入

代码如下（示例）：

import { saveAs } from 'file-saver'

3.在页面中可以定义一个html模板，也可以在全局写

4.在点击下载事件中，调用这个方法即可

说明：

如果是想下载：已有的页面结构的话。

直接使用：

const node = document.querySelector('.exportBox').innerHTML

去获取html结构即可。

如果没有页面结构。只有部分内容或者部分html结构的话。就需要自己手动拼接一个完整的html结构出来。比如这样：

<el-button @click="handleDown(scope.row)" type="text">下载</el-button>
 
handleDown(row){
      let str = `
      <h1> ${row.title}</h1>
      <p><span> ${row.workingTeam} </span></p>
      <p><span> ${row.updateTime} </span></p>
      ` + row.content
      let htmlStr = `
      <!DOCTYPE html>
      <html lang="en">
        <body style="font-family:方正仿宋_GBK;text-align: center;mso-ascii-font-family:'Times New Roman'">
          ${str}
        </body>
      </html>
`
      const node = htmlStr
      const html = this.getModelHtml(node,row)
      const blob = new Blob([html], { type: 'application/msword;charset=utf-8' })
      saveAs(blob, `${row.title}.doc`)
    },
    getModelHtml(mhtml,row) {
      return `<!DOCTYPE html>
                <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
                  xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
                  xmlns="http://www.w3.org/TR/REC-html40">
                <head>
                  <!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]-->

                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width,initial-scale=1.0">
                    <title>${row.title}</title>

                </head>
                <body>
                    <div style="display: flex;justify-content: center;">
                      ${mhtml}
                    </div>
                </body>
                </html>`
    },

参考：

Vue html转word_Shelly-L的博客-CSDN博客一、使用步骤1.引入依赖包代码如下（示例）：import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_https_context = ssl._create_unverified_context 2...https://blog.csdn.net/qq_52177667/article/details/121113899

南北极之间

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片：前端下载利器FileSaver

Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片：前端下载利器FileSaver
复制链接

扫一扫