zoukankan      html  css  js  c++  java

  • 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>

    1、导出html

    方法：
    1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出
    2）获取要导出组件页面的html的dom标签代码，通过this.$refs.resume.$el.innerHTML获取，也可以通过document.getElementById('resumeId')获得
    3）构造html页面，并使用createObjectURL构造一个文件流并下载，如下：

    1.  
      var a = document.createElement('a');
    2.  
      var url = window.URL.createObjectURL(new Blob([content],
    3.  
      { type: (option.type || "text/plain") + ";charset=" + (option.encoding || 'utf-8') }));
    4.  
      a.href = url;
    5.  
      a.download = fileName || 'file';
    6.  
      a.click();
    7.  
      window.URL.revokeObjectURL(url);

    具体代码如下：

    1.  
      import axios from 'axios'
    2.  
      import resumeHtml from './resume-html'
    3.  
      import writer from 'file-writer';
    4.  
      import {resumecss} from '@/assets/style/download/resume.css.js'
    5.  
       
    6.  
      ...
    7.  
       
    8.  
      downloadHtml(name){
    9.  
      let html = this.getHtmlContent();
    10.  
      let s = writer(`${name}的简历.html`, html, 'utf-8');
    11.  
      console.log('s stream',s);
    12.  
       
    13.  
      },
    14.  
      getHtmlContent(){
    15.  
      //获取html另外一种方式：this.$el.outerHTML
    16.  
      const template = this.$refs.resume.$el.innerHTML;
    17.  
      let html = `<!DOCTYPE html>
    18.  
      <html>
    19.  
      <head>
    20.  
      <meta charset="utf-8">
    21.  
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
    22.  
      <title>X-Find迅聘选才</title>
    23.  
      <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
    24.  
      <style>
    25.  
      ${resumecss}
    26.  
      </style>
    27.  
      </head>
    28.  
      <body>
    29.  
      <div class="resume_preview_page" style="margin:0 auto;1200px">
    30.  
      ${template}
    31.  
      </div>
    32.  
      </body>
    33.  
      </html>`;
    34.  
      return html;
    35.  
      }

    导出的样式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.  
      })

    3、导出PDF

    方法：
    1）创建一个htmlToPdf.js文件，如下代码

    1.  
      // 下面两个package要单独安装
    2.  
      import html2Canvas from 'html2canvas'
    3.  
      import JsPDF from 'jspdf'
    4.  
       
    5.  
      export default{
    6.  
      install (Vue, options) {
    7.  
      Vue.prototype.getPdf = function (id,title) {
    8.  
      html2Canvas(document.querySelector(`#${id}`), {
    9.  
      // allowTaint: true
    10.  
      useCORS:true//看情况选用上面还是下面的，
    11.  
      }).then(function (canvas) {
    12.  
      let contentWidth = canvas.width
    13.  
      let contentHeight = canvas.height
    14.  
      let pageHeight = contentWidth / 592.28 * 841.89
    15.  
      let leftHeight = contentHeight
    16.  
      let position = 0
    17.  
      let imgWidth = 595.28
    18.  
      let imgHeight = 592.28 / contentWidth * contentHeight
    19.  
      let pageData = canvas.toDataURL('image/jpeg', 1.0)
    20.  
      let PDF = new JsPDF('', 'pt', 'a4')
    21.  
      if (leftHeight < pageHeight) {
    22.  
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    23.  
      } else {
    24.  
      while (leftHeight > 0) {
    25.  
      PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    26.  
      leftHeight -= pageHeight
    27.  
      position -= 841.89
    28.  
      if (leftHeight > 0) {
    29.  
      PDF.addPage()
    30.  
      }
    31.  
      }
    32.  
      }
    33.  
      PDF.save(title + '.pdf')
    34.  
      }
    35.  
      )
    36.  
      }
    37.  
      }
    38.  
      }

    2）main.js文件中添加如下代码：

    1.  
      import htmlToPdf from '@/utils/htmlToPdf'
    2.  
      Vue.use(htmlToPdf)

    3）然后就可以在要导出pdf文件组件里面添加 如下 代码即可导出

    this.getPdf('resumeId',name)

    clipboard.png

    clipboard.png

    clipboard.png

    clipboard.png

    总结：

    1、虽然完成了三种文件的导出但是我对word和html导出还是不满意，不是最佳解决方法，如果 有人有更好的方法，欢迎留言
    2、导出的word没有了样式，所以这块还是有问题

    引用 ：

    1、https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
    2、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初级 总结
    defineProperty和defineProperties介绍
    vue的生命周期
    将组件拼装使用
    Android和Html的简单交互
    Android接口回调的理解
    Android设计模式—— 观察者模式(以及EventBus的简单使用)
    Android Span的简单使用
    Android7.0打开sdacrd图片问题
    打开图片无缩略图错误
  • 原文地址：https://www.cnblogs.com/wsj1/p/15245712.html
Copyright © 2011-2022 走看看