vue 项目将编辑框输入的html带样式下载成文档

1.需求：

• 利用markdown插件，将生成的html带样式保存成文档

2.代码

   // 获取编辑框的 html
  handleSave(): void {
    const renderContent = (this.$refs.editor as any).d_render
    // 处理得到的 标签
    const htmlElement = document.createElement('html')
    htmlElement.setAttribute('lang', 'zh-CN')
    const headElement = document.createElement('head')
    const bodyElement = document.createElement('body')
    const metaElement = document.createElement('meta')
    metaElement.setAttribute('charset', 'utf-8')
    headElement.appendChild(metaElement)
    const styles = this.addStyle() 
    headElement.appendChild(styles)
    bodyElement.innerHTML = renderContent
    htmlElement.appendChild(headElement)
    htmlElement.appendChild(bodyElement)
    const contents = htmlElement.outerHTML // 从html对象取出字符串
    this.download('hello.html', contents) // 下载
    console.log(htmlElement, contents)
  }
//  生成要下载的样式
  addStyle() {
    const style = document.createElement('style')
    style.type = 'text/css'
    try {
      style.appendChild(
        document.createTextNode(
          '.hljs-center{text-align: center;}.hljs-left{text-align:left}.hljs-right{text-align:right} table {     border-spacing: 0;border-collapse: collapse;display: inline-block;overflow: auto;} table tr { background-color: #fff;border-top: 1px solid #c6cbd1} table td, table th { padding: 6px 13px; border: 1px solid #dfe2e5;}'
        )
      )
    } catch (ex) {
      // style.styleSheet.cssText = 'body{background-color:red}' //针对IE
    }
    return style
  }
 // 利用a标签下载文档
  download(filename: any, content: string) {
    const element = document.createElement('a')
    // encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content))
    element.setAttribute('download', filename)
    element.style.display = 'none'
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)
  }