vue导出html、word和pdf的实现代码

导出的页面组件如下:

<template> <div> <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 content="width=device-width,initial-scale=1.0"> <title>X-Find迅聘选才</title> <link href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" /> <style> ${resumecss} </style> </head> <body> <div> ${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)

vue导出html、word和pdf的实现代码

vue导出html、word和pdf的实现代码

vue导出html、word和pdf的实现代码

vue导出html、word和pdf的实现代码

总结:

1、虽然完成了三种文件的导出但是我对word和html导出还是不满意,不是最佳解决方法,如果 有人有更好的方法,欢迎留言

2、导出的word没有了样式,所以这块还是有问题

引用 :

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9a465ec5a00739a4481c6aa80eb276d2.html