vue導(dǎo)出html、word和pdf的實現(xiàn)代碼
更新時間：2018年07月31日 08:54:14 作者：Awbeci
這篇文章主要介紹了vue導(dǎo)出html、word和pdf的實現(xiàn)方法，文中完成了三種文件的導(dǎo)出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下
導(dǎo)出的頁面組件如下：
<template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div> </template>
1、導(dǎo)出html
方法：
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(){
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ā)送到后臺，后臺通過轉(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對象
})
3、導(dǎo)出PDF
方法：
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)
總結(jié)：
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
3、nodejs(officegen)+vue(axios)在客戶端導(dǎo)出word文檔
5、vue實現(xiàn)word，pdf文件的導(dǎo)出
以上所述是小編給大家介紹的vue導(dǎo)出html、word和pdf的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue項目在env文件中設(shè)置的變量無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vuex 第三方包實現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實現(xiàn)數(shù)據(jù)持久化的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue-resource安裝過程及使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章通過代碼示例給大家詳細(xì)分析了Vue組件開發(fā)的相關(guān)技巧以及知識點，對此有需要的讀者們參考下吧。2018-03-03
vue項目如何使用$router.go(-1)返回時刷新原來的界面
這篇文章主要介紹了vue項目如何使用$router.go(-1)返回時刷新原來的界面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了解決vuex改變了state的值,但是頁面沒有更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue的路由映射問題及解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue3網(wǎng)站首頁布局開發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來看看Vue3網(wǎng)站首頁布局開發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢實戰(zhàn)全過程
這篇文章主要給大家介紹了關(guān)于如何基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢的相關(guān)資料,Vue Element UI提供了el-pagination組件來實現(xiàn)表格數(shù)據(jù)的分頁功能,需要的朋友可以參考下2023-10-10
vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能
本次需求是做一個視頻列表，點擊視頻列表播放對應(yīng)視頻；同時要求實現(xiàn)斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧2022-12-12