阅读 1859

vue前端导出当前html页面

methods内写入两个方法

 gethtmlyes(val) {
        let a = document.createElement('a')
        let url = window.URL.createObjectURL(
          new Blob([this.gethtml()], {
            type: ''
          })
        )
        a.href = url
        a.download = `${sessionStorage.getItem('FileName')}file.html`
        a.click()
        window.URL.revokeObjectURL(url)
    },
    gethtml() {
      const template = this.$refs.htmlall.innerHTML
      let html = `
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
          <title>X-Find迅聘选才</title>
          <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />

          </head>
          <body>
          <div class="resume_preview_page" style="margin:0 auto;width:1200px">
          ${template}
          </div>
          </body>
          </html>`
      return html
    }
复制代码

页面-设置ref元素

<template>
  <div>
    <default-header @getpdfyes="getpdfyes" @gethtmlyes="gethtmlyes"></default-header>
    <div id="main">
      <div class="mainbox">
        <!-- 组件 -->
        <div id="pdfDom" class="movebox" ref="htmlall">
          <nsfocus-cont></nsfocus-cont>
        </div>
      </div>
    </div>
  </div>
</template>
复制代码
文章分类
前端
文章标签