vue導出html、word和pdf

時間 2019-11-15

標籤 vue 導出 html word pdf 欄目 HTML 简体版

原文原文鏈接

導出的頁面組件以下：css

<template>
    <div id="resumeId">
        <resumeHtml  ref="resume" @on-download="download"/>
    </div>
</template>

一、導出html

方法：
1）獲取要導出的組件頁面的css把它設置成js變量一文本並經過export導出
2）獲取要導出組件頁面的html的dom標籤代碼，經過this.$refs.resume.$el.innerHTML獲取，也能夠經過document.getElementById('resumeId')得到
3）構造html頁面，並使用createObjectURL構造一個文件流並下載，以下：html

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

具體代碼以下：前端

import axios from 'axios'
import resumeHtml from './resume-html'
import writer from 'file-writer';
import {resumecss} from '@/assets/style/download/resume.css.js'

...

 downloadHtml(name){               
            let html = this.getHtmlContent();
            let s = writer(`${name}的簡歷.html`, html, 'utf-8');
            console.log('s stream',s);
            
        },
getHtmlContent(){
            //獲取html另一種方式：this.$el.outerHTML
            const template = this.$refs.resume.$el.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" />
                    <style>
                        ${resumecss}
                    </style>
                </head>
                <body>
                    <div class="resume_preview_page" style="margin:0 auto;width:1200px">
                    ${template}
                    </div>
                </body>
                </html>`;
            return html;
        }

導出的樣式js文件：vue

export const resumecss =`
html,
body {
    position: relative;
    height: 100%;
}

.page_layout {
    position: relative;
    height: 100%;
    display: flex;
    & .layout_content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
}
...

二、導出Word

方法：
1）使用上面構造好的html文本，以文件流的形式發送到後臺，後臺經過轉換獲得word流傳給前端並下載html5

let url = `${this.$url}/uploadFile/uploadResume`;
            let html = this.getHtmlContent();
            // 構造blob文件流
            let html_ = new Blob([html],{ "type" : "text/html;charset=utf-8" })
            let formdata = new FormData();
            formdata.append('file', html_, `sdf.html`);//sdf.html是設置文件名
            axios({
                method: 'post',
                url: url,
                data:formdata,
                responseType:'blob',//這裏若是不設置，下載會打不開文件
            })
            .then(res=>{
                console.log('download res',res);
                //經過後臺返回 的word文件流設置文件名並下載
                var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document這裏表示doc類型
                var downloadElement = document.createElement('a');
                var href = window.URL.createObjectURL(blob); //建立下載的連接
                downloadElement.href = href;
                downloadElement.download ='s.doc'; //下載後文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //點擊下載
                document.body.removeChild(downloadElement); //下載完成移除元素
                window.URL.revokeObjectURL(href); //釋放掉blob對象
            })

三、導出PDF

方法：
1）建立一個htmlToPdf.js文件，以下代碼node

// 下面兩個package要單獨安裝
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (id,title) {
      html2Canvas(document.querySelector(`#${id}`), {
        // allowTaint: true
        useCORS:true//看狀況選用上面仍是下面的，
      }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
            while (leftHeight > 0) {
                  PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight
                  position -= 841.89
                  if (leftHeight > 0) {
                      PDF.addPage()
                  }
              }
            }
            PDF.save(title + '.pdf')
        }
      )
    }
  }
}

2）main.js文件中添加以下代碼：ios

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

3）而後就能夠在要導出pdf文件組件裏面添加以下代碼便可導出canvas

this.getPdf('resumeId',name)

總結：

一、雖然完成了三種文件的導出可是我對word和html導出仍是不滿意，不是最佳解決方法，若是有人有更好的方法，歡迎留言
二、導出的word沒有了樣式，因此這塊仍是有問題axios

引用：

一、https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
二、file-writer
三、nodejs(officegen)+vue(axios)在客戶端導出word文檔
四、HTML5 File API — 讓前端操做文件變的可能
五、Html5——File、FileReader、Blob、Fromdata對象
六、Vue導出頁面爲PDF格式
七、axios中文說明
八、vue實現word，pdf文件的導出segmentfault

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue導出html、word和pdf

一、導出html

二、導出Word

三、導出PDF

總結：

引用 ：

引用：