摘要：導(dǎo)出的頁面組件如下導(dǎo)出方法獲取要導(dǎo)出的組件頁面的把它設(shè)置成變量一文本并通過導(dǎo)出獲取要導(dǎo)出組件頁面的的標(biāo)簽代碼，通過獲取，也可以通過獲得構(gòu)造頁面，并使用構(gòu)造一個文件流并下載，如下具體代碼如下的簡歷獲取另外一種方式迅聘選才導(dǎo)出

導(dǎo)出的頁面組件如下：

方法：
1）獲取要導(dǎo)出的組件頁面的css把它設(shè)置成js變量一文本并通過export導(dǎo)出
2）獲取要導(dǎo)出組件頁面的html的dom標(biāo)簽代碼，通過this.$refs.resume.$el.innerHTML獲取，也可以通過document.getElementById("resumeId")獲得
3）構(gòu)造html頁面，并使用createObjectURL構(gòu)造一個文件流并下載，如下：

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 = `
                
                
                    
                    
                    
                    
                    
                
                
                    

                    ${template}
                    
                
                `;
            return html;
        }
      

導(dǎo)出的樣式j(luò)s文件：

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;
    }
}
...

方法：
1）使用上面構(gòu)造好的html文本，以文件流的形式發(fā)送到后臺，后臺通過轉(zhuǎn)換得到word流傳給前端并下載

let url = `${this.$url}/uploadFile/uploadResume`;
            let html = this.getHtmlContent();
            // 構(gòu)造blob文件流
            let html_ = new Blob([html],{ "type" : "text/html;charset=utf-8" })
            let formdata = new FormData();
            formdata.append("file", html_, `sdf.html`);//sdf.html是設(shè)置文件名
            axios({
                method: "post",
                url: url,
                data:formdata,
                responseType:"blob",//這里如果不設(shè)置，下載會打不開文件
            })
            .then(res=>{
                console.log("download res",res);
                //通過后臺返回 的word文件流設(shè)置文件名并下載
                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); //創(chuàng)建下載的鏈接
                downloadElement.href = href;
                downloadElement.download ="s.doc"; //下載后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //點擊下載
                document.body.removeChild(downloadElement); //下載完成移除元素
                window.URL.revokeObjectURL(href); //釋放掉blob對象
            })

方法：
1）創(chuàng)建一個htmlToPdf.js文件，如下代碼

// 下面兩個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文件中添加如下代碼：

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

3）然后就可以在要導(dǎo)出pdf文件組件里面添加 如下 代碼即可導(dǎo)出

this.getPdf("resumeId",name)

1、雖然完成了三種文件的導(dǎo)出但是我對word和html導(dǎo)出還是不滿意，不是最佳解決方法，如果 有人有更好的方法，歡迎留言
2、導(dǎo)出的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)在客戶端導(dǎo)出word文檔
4、HTML5 File API — 讓前端操作文件變的可能
5、Html5——File、FileReader、Blob、Fromdata對象
6、Vue導(dǎo)出頁面為PDF格式
7、axios中文說明
8、vue實現(xiàn)word，pdf文件的導(dǎo)出