快捷導(dǎo)航

vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)代碼

更新時(shí)間：2018年07月31日 08:54:14 作者：Awbeci

這篇文章主要介紹了vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)方法，文中完成了三種文件的導(dǎo)出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下

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

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

1、導(dǎo)出html

方法：

1）獲取要導(dǎo)出的組件頁(yè)面的css把它設(shè)置成js變量一文本并通過(guò)export導(dǎo)出

2）獲取要導(dǎo)出組件頁(yè)面的html的dom標(biāo)簽代碼，通過(guò)this.$refs.resume.$el.innerHTML獲取，也可以通過(guò)document.getElementById('resumeId')獲得

3）構(gòu)造html頁(yè)面，并使用createObjectURL構(gòu)造一個(gè)文件流并下載，如下：

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}的簡(jiǎn)歷.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;
 }

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

2、導(dǎo)出Word

方法：

1）使用上面構(gòu)造好的html文本，以文件流的形式發(fā)送到后臺(tái)，后臺(tái)通過(guò)轉(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è)置，下載會(huì)打不開(kāi)文件
 })
 .then(res=>{
 console.log('download res',res);
 //通過(guò)后臺(tái)返回 的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(); //點(diǎn)擊下載
 document.body.removeChild(downloadElement); //下載完成移除元素
 window.URL.revokeObjectURL(href); //釋放掉blob對(duì)象
 })

3、導(dǎo)出PDF

方法：

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

// 下面兩個(gè)package要單獨(dú)安裝
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)

總結(jié)：

1、雖然完成了三種文件的導(dǎo)出但是我對(duì)word和html導(dǎo)出還是不滿意，不是最佳解決方法，如果有人有更好的方法，歡迎留言

2、導(dǎo)出的word沒(méi)有了樣式，所以這塊還是有問(wèn)題

引用：

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、Vue導(dǎo)出頁(yè)面為PDF格式

5、vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出

以上所述是小編給大家介紹的vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: