html 转pdf下载

原文链接 https://blog.csdn.net/weixin_34289454/article/details/88768689  下载pdf

导出的页面组件如下：

  1.   <template>
  2.   <div id="resumeId">
  3.   <resumeHtml ref="resume" @on-download="download"/>
  4.   div>
  5.   template>

"https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
  •   <style>
  •   ${resumecss}
  •   style>
  •   head>
  •   <body>
  •   <div class="resume_preview_page" style="margin:0 auto;width:1200px">
  •   ${template}
  •   div>
  •   body>
  •   html>`;
  •   return html;
  •   }

    • 导出的样式js文件：

    1.   export const resumecss =`
    2.   html,
    3.   body {
    4.   position: relative;
    5.   height: 100%;
    6.   }
    7.    
    8.   .page_layout {
    9.   position: relative;
    10.   height: 100%;
    11.   display: flex;
    12.   & .layout_content {
    13.   flex-grow: 1;
    14.   display: flex;
    15.   flex-direction: column;
    16.   }
    17.   }
    18.   ...

    2、导出Word

    方法：
    1）使用上面构造好的html文本，以文件流的形式发送到后台，后台通过转换得到word流传给前端并下载

    1.   let url = `${this.$url}/uploadFile/uploadResume`;
    2.   let html = this.getHtmlContent();
    3.   // 构造blob文件流
    4.   let html_ = new Blob([html],{ "type" : "text/html;charset=utf-8" })
    5.   let formdata = new FormData();
    6.   formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名
    7.   axios({
    8.   method: 'post',
    9.   url: url,
    10.   data:formdata,
    11.   responseType:'blob',//这里如果不设置，下载会打不开文件
    12.   })
    13.   .then(res=>{
    14.   console.log('download res',res);
    15.   //通过后台返回 的word文件流设置文件名并下载
    16.   var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
    17.   var downloadElement = document.createElement('a');
    18.   var href = window.URL.createObjectURL(blob); //创建下载的链接
    19.   downloadElement.href = href;
    20.   downloadElement.download ='s.doc'; //下载后文件名
    21.   document.body.appendChild(downloadElement);
    22.   downloadElement.click(); //点击下载
    23.   document.body.removeChild(downloadElement); //下载完成移除元素
    24.   window.URL.revokeObjectURL(href); //释放掉blob对象
    25.   })

    file-writer
    3、nodejs(officegen)+vue(axios)在客户端导出word文档
    4、HTML5 File API — 让前端操作文件变的可能
    5、Html5——File、FileReader、Blob、Fromdata对象
    6、Vue导出页面为PDF格式
    7、axios中文说明
    8、vue实现word，pdf文件的导出

      相关资源：vue导出word功能_vue页面导出word-互联网文档类资源

    相关

    标签