vue html,word,pdf 구현 코드 내 보 내기

7011 단어 vue도 출htmlwordpdf
내 보 낼 페이지 구성 요 소 는 다음 과 같 습 니 다:

<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" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
 <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 텍스트 를 사용 하여 파일 흐름 으로 백 엔 드 로 보 내 고 백 엔 드 는 워드 변환 을 통 해 프론트 엔 드 로 전송 하고 다운로드 합 니 다.

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.세 가지 파일 내 보 내기 가 완료 되 었 지만 저 는 워드 와 html 내 보 내기 가 만 족 스 럽 지 않 습 니 다.최선 의 해결 방법 이 아 닙 니 다.더 좋 은 방법 이 있다 면 댓 글 을 환영 합 니 다.
2.내 보 낸 워드 에 스타일 이 없어 서 문제 가 있 습 니 다.
참조:
1、 https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
2、 file-writer
3、 nodejs(officegen)+vue(axios)클 라 이언 트 에서 워드 문 서 를 내 보 냅 니 다.
4、 Vue PDF 형식 으로 페이지 내 보 내기
5、 vue 워드,pdf 파일 내 보 내기
위 에서 말 한 것 은 편집장 이 소개 한 vue 에서 html,word,pdf 의 실현 코드 를 내 보 내 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
nodejs(officegen)+vue(axios)가 클 라 이언 트 에서 워드 문 서 를 내 보 내 는 방법
위 챗 웹 페이지 에서 권한 을 부여 하고 사용자 정 보 를 얻 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage