vueプロジェクト編集ボックスに入力したhtmlテープスタイルをドキュメントにダウンロード

文書ディレクトリ

1.需要:

2.コード

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)
  }