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


Posted in Javascript onJuly 31, 2018

导出的页面组件如下:

<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)

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

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

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

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

总结:

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的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
express express-session的使用小结
Dec 12 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
node.js实现上传文件功能
Jul 15 Javascript
npm qs模块使用详解
Feb 07 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 #Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 #Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
You might like
Apache服务器无法使用的解决方法
2013/05/08 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JavaScript实现图片放大镜效果
2019/06/27 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python获取豆瓣电影简介代码分享
2014/01/16 Python
python实现数独算法实例
2015/06/09 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python实现猜数字小游戏
2020/03/24 Python
Python中 map()函数的用法详解
2018/07/10 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python常用数据分析模块原理解析
2020/07/20 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
会计师职业生涯规划范文
2014/02/18 职场文书
亲子读书活动方案
2014/02/22 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
国际商务英语专业求职信
2014/07/08 职场文书