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

更新时间：2018年07月31日 08:54:14 作者：Awbeci

这篇文章主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下

导出的页面组件如下：

<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文本，以文件流的形式发送到后台，后台通过转换得到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、Vue导出页面为PDF格式

5、vue实现word，pdf文件的导出

以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue打包上传到服务器加载慢的优化方式
这篇文章主要介绍了vue打包上传到服务器加载慢的优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue中使用element-ui进行表单验证的实例代码
这篇文章主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法
2020-01-01
利用Vue的v-for和v-bind实现列表颜色切换
这篇文章主要介绍了利用Vue的v-for和v-bind实现列表颜色切换，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
关于vue3中setup函数的使用
这篇文章主要介绍了关于vue3中setup函数的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
浅谈将three项目迁移至vue项目遇到的问题
本文主要介绍了将three项目迁移至vue项目遇到的问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
2018-10-10
在VUE style中使用data中的变量的方法
这篇文章主要介绍了在VUE style中使用data中的变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue中elementUI里面一些插件的使用
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
详解如何在vue中封装axios请求并集中管理
这篇文章主要为大家详细介绍了如何在vue中封装axios请求并集中管理,w文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
2023-10-10