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

(0)

相关推荐

  • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,

  • Vue网页html转换PDF(最低兼容ie10)的思路详解

    HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式 所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这

  • vue实现word,pdf文件的导出功能

    vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/

  • Vue导出页面为PDF格式的实现思路

    通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理.. 说起来很容易,那么具体怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save 2.定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/h

  • vue中将网页打印成pdf实例代码

    整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享. <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id="pdfDom"></div&

  • Vue项目pdf(base64)转图片遇到的问题及解决方法

    公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法 要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件 引入插件 这里很多博客都是使用Java

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

  • vue2.0全局组件之pdf详解

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen

  • 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标签代码,通过thi

  • Java实现无损Word转PDF的示例代码

    目录 前言 word转pdf实现思路 项目远程仓库 Maven项目pom文件依赖 核心代码实现 结果分析 前言 本来想写word转pdf和pdf转word的代码呢,没想到word转pdf就写了很多很多行代码才实现,为了方便大家消化理解,先写了word转pdf方法实现作为一篇文章. word转pdf实现思路 代码实现主要依赖两个第三方jar包,一个是pdfbox,一个是aspose-words.pdfbox包完全开源免费,aspose-words免费版生成有水印,且生成数量有限制.单纯用pdfbo

  • java使用jacob.jar将word转pdf

    本文实例为大家分享了java利用jacob.jar将word转pdf的具体代码,供大家参考,具体内容如下 1.jacob.jar配置说明 JACOB 就是 JAVA-COM Bridge的缩写,提供自动化的访问com的功能,使用jacob.jar首先电脑要安装了office. 将jacob.jar jacob.jar导入到项目lib目录使用前,还要然后把jacob.bll放入C:\Windows\System32目录下,同时还要放入java/jdk/jre/bin目录下(选择bll文件的时候,如

  • java利用jacob将word转pdf

    本文实例为大家分享了java开发利用jacob将word转pdf的具体代码,供大家参考,具体内容如下 jacob 缺点:需要 window 环境,而且速度是最慢的需要安装 msofficeWord 以及 SaveAsPDFandXPS.exe ( word 的一个插件,用来把 word 转化为 pdf ) 开发流程: SaveAsPDFandXPS 下载地址 jacob 包下载地址: 1.先安装SaveAsPDFandXPS 2.下载 jacob 解压后存放路径: jacob.jar 放在 C:

  • Vue将页面导出为图片或者PDF

    本文实例为大家分享了Vue导出页面为PDF格式的具体代码,供大家参考,具体内容如下 导出为图片 1.将页面html转换成图片 npm install html2canvas --save 2.在需要导出的页面引入 import html2canvas from 'html2canvas'; 在 methods 中添加方法 dataURLToBlob(dataurl) {//ie 图片转格式 var arr = dataurl.split(','), mime = arr[0].match(/:(

  • vue导出word纯前端的实现方式

    vue导出word纯前端实现 最近项目有个需求导出word,纯前端实现,查了查资料,用docxtemplater简直不要太简单. 直接把官网例子拿过来就可以了.!!! 官网地址 首先,新建一个docx文件,把模板先写好. 注意!!如果数据结构中存在数组. 用{#xxx}{/xxx} 包裹. 数据结构示例: wordData: { name: '导出word', nameList: [{ name: "张三", age: 16, hobby: ['吃饭', '睡觉', '打豆豆'] },

  • java导出生成word的简单方法

    最近做的项目,需要将一些信息导出到word中.在网上找了好多解决方案,现在将这几天的总结分享一下. 目前来看,java导出word大致有6种解决方案: 1.Jacob是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建一座桥梁.使用Jacob自带的DLL动态链接库,并通过JNI的方式实现了在Java平台上对COM程序的调用.DLL动态链接库的生成需要windows平台的支持.该方案只能在windows平台实现,是其局限性. 2.Apache POI包括一系列的API,它

  • 利用python程序生成word和PDF文档的方法

    一.程序导出word文档的方法 将web/html内容导出为world文档,再java中有很多解决方案,比如使用Jacob.Apache POI.Java2Word.iText等各种方式,以及使用freemarker这样的模板引擎这样的方式.php中也有一些相应的方法,但在python中将web/html内容生成world文档的方法是很少的.其中最不好解决的就是如何将使用js代码异步获取填充的数据,图片导出到word文档中. 1. unoconv 功能: 1.支持将本地html文档转换为docx

随机推荐