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文件的导出

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wsj1/p/15245712.html