html转word导出(前端实现)

好想Z☡zᶻ

已于 2024-02-22 13:36:22 修改

阅读量624

点赞数 9

文章标签： vue.js 前端

于 2024-02-22 13:34:42 首次发布

本文链接：https://blog.csdn.net/qq_45750213/article/details/136228934

版权

下载：

npm install html-docx-js
npm install file-saver
// 引入
import htmlDocx from 'html-docx-js/dist/html-docx'
import saveAs from 'file-saver'

封装方法：（写在methods.js中）

/**
 * html转word
 * @param {String}html 需要导出的html代码
 * @param {String}name 导出文件名
 */
export function html2word (html, name) {
  const word = `
    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="UTF-8">
        <style>
          /* table 样式 */
          table {
            text-align: center;
            border: 1px solid #797979;
            border-collapse: collapse;
            table-layout: fixed;
            word-wrap: break-word;
            word-break: break-all;
          }
          th,td {
            border: 1px solid #797979;
          }

          /* blockquote 样式 */
          blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
          }

          /* code 样式 */
          code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
          }
          pre code {
            display: block;
          }

          /* ul ol 样式 */
          ul, ol {
            margin: 10px 0 10px 20px;
          }
        </style>
        <title></title>
      </head>
      <body>
        ${html}
      </body>
    </html>
  `
  saveAs(htmlDocx.asBlob(word, { orientation: 'landscape' }), name)
}

使用：