摘要:導出的頁面組件如下導出方法獲取要導出的組件頁面的把它設置成變量一文本并通過導出獲取要導出組件頁面的的標簽代碼,通過獲取,也可以通過獲得構造頁面,并使用構造一個文件流并下載,如下具體代碼如下的簡歷獲取另外一種方式迅聘選才導出
導出的頁面組件如下:
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(){ //獲取html另外一種方式:this.$el.outerHTML const template = this.$refs.resume.$el.innerHTML; let html = `X-Find迅聘選才 ${template}`; 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
2、file-writer
3、nodejs(officegen)+vue(axios)在客戶端導出word文檔
4、HTML5 File API — 讓前端操作文件變的可能
5、Html5——File、FileReader、Blob、Fromdata對象
6、Vue導出頁面為PDF格式
7、axios中文說明
8、vue實現word,pdf文件的導出
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96433.html
摘要:例如第二步在根目錄下也就是中添加一個文件夾,文件夾名稱為第一步中二級域名的前綴,也就是然后將你的項目或者其他項目添加入該文件夾中。 項目初始 在一個陽光明媚的下午,學院就業指導老師讓我們每個人做一份簡歷,然后打印上交。后回到宿舍,苦苦在網上尋找,未果。因為不要錢的模板太丑,好看的模板得花錢...,像我等窮逼,哪里有什么閑錢。于是,果斷下載了個丑不拉幾的模板,打開word隨便填了填交了上...
FineReport支持多種不同的導出方式,直接使用FineReport內置導出按鈕可以非常快捷方便的來對各種格式的輸出,但是我們在web頁面集成中的時候,往往只想將報表內容嵌入到iframe中,而工具欄以及工具欄上的按鈕都會隱藏掉,而使用web頁面自定義的按鈕,那么,此時,這種自定義按鈕如何實現導出呢? showImg(https://segmentfault.com/img/bVJR1H?w=...
在日常中查看使用word,excel,pptx的offic文件是常見之事,想過用使用微軟的開發接口,比如一個閱讀器Office Web。 什么是 Office Web 查看器? 它是一種創建 Office Web Viewer 鏈接的服務。Office Web Viewer 鏈接可在瀏覽器中打開 Word、PowerPoint 或 Excel 文件,否則這些文件將被下載。您可以輕松地將下載...
摘要:假設我有下面這個文件,里面有很多圖片,我想把這些圖片批量導出,而不是在里一張張手動拷貝本文介紹一種快捷做法。 假設我有下面這個PDF文件,里面有很多圖片,我想把這些圖片批量導出,而不是在Adobe Acrobat Reader里一張張手動拷貝: showImg(https://segmentfault.com/img/remote/1460000017166430); 本文介紹一種快捷...
閱讀 1670·2021-10-13 09:39
閱讀 2099·2021-09-07 10:20
閱讀 2678·2019-08-30 15:56
閱讀 2945·2019-08-30 15:56
閱讀 932·2019-08-30 15:55
閱讀 625·2019-08-30 15:46
閱讀 3494·2019-08-30 15:44
閱讀 2552·2019-08-30 11:15