導出的頁面組件如下：
<template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div></template>
1、導出html
方法：
1）獲取要導出的組件頁面的css把它設置成js變量一文本并通過export導出
2）獲取要導出組件頁面的html的dom標簽代碼，通過this.$refs.resume.$el.innerHTML獲取，也可以通過document.getElementById('resumeId')獲得
3）構造html頁面，并使用createObjectURL構造一個文件流并下載，如下：
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(){ 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" /> <style> ${resumecss} </style> </head> <body> <div class="resume_preview_page" style="margin:0 auto;width:1200px"> ${template} </div> </body> </html>`; return html; }導出的樣式js文件：
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; }}...2、導出Word
方法：
1）使用上面構造好的html文本，以文件流的形式發送到后臺，后臺通過轉換得到word流傳給前端并下載
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對象 })3、導出PDF
方法：
1）創建一個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）然后就可以在要導出pdf文件組件里面添加 如下 代碼即可導出
this.getPdf('resumeId',name)
總結：
1、雖然完成了三種文件的導出但是我對word和html導出還是不滿意，不是最佳解決方法，如果 有人有更好的方法，歡迎留言
2、導出的word沒有了樣式，所以這塊還是有問題
引用 ：
1、https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
3、nodejs(officegen)+vue(axios)在客戶端導出word文檔
以上所述是小編給大家介紹的vue導出html、word和pdf的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
