Vue如何将页面导出成PDF文件

本文实例为大家分享了Vue将页面导出成PDF文件的具体代码，供大家参考，具体内容如下

我在前端岗位上要实现个可视化图表页的PDF文件导出，在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法。

1. 下载npm包

npm install html2canvas
npm install jspdf

2. 创建插件.js文件

Vue-cli项目的话是在./utils文件夹下，我在这里使用的nuxt框架，所以是在./plugins文件夹下。

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
 install (Vue, options) {
  Vue.prototype.getPdf = function () {
   var title = this.pdfTitle; // 导出的pdf文件名
   html2Canvas(document.querySelector(this.pdfSelector), { //导出的html元素
    allowTaint: 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');
   })
  }
 }
}

上面的插件代码可以直接复制，然后在引用的Vue文件中填入自己的参数就可以了。

3. 修改引用页面

导出按钮调用getPdf方法，data填入参数。

<template>
 <div id="pdfPrint">
    <!-- 调用getPdf方法 -->
    <el-button @click="getPdf('#pdfPrint')">保存为PDF</el-button>
 </div>
</template>

<script>
export default {
 data() {
  return {
   // 填入导出的pdf文件名和html元素
   pdfTitle: '因子评价报告',
   pdfSelector: '#pdfPrint',
  }
 },

大概就是这样啦，非常地简单。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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导出页面为PDF格式的实现思路

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

  • Vue2.0实现将页面中表格数据导出excel的实例

    这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

  • Vue如何将页面导出成PDF文件

    本文实例为大家分享了Vue将页面导出成PDF文件的具体代码,供大家参考,具体内容如下 我在前端岗位上要实现个可视化图表页的PDF文件导出,在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法. 1. 下载npm包 npm install html2canvas npm install jspdf 2. 创建插件.js文件 Vue-cli项目的话是在./utils文件夹下,我在这里使用的nuxt框架,所以是在./plugins文件夹下. import html2

  • 如何在vue中使用pdfjs预览pdf文件

    如何在vue中使用pdfjs预览pdf文件

    目录 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf文件下载下来,通过电脑安装的专用于打开pdf的软件来查看pdf文件呢.如果有个需求说不要让用户安装软件呢,毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛.ok,有了这样的需求那我们是不是也得去实现嘛,毕竟这理由咱也没法反驳啊. 思考 既然都提出来了,那就想想怎么使用咯.既然需要用到pdf.不知道有没有关于js能够操作的库文件来帮我呢?果断一百度,咱们今天的主角就来

  • Python实现将Excel内容批量导出为PDF文件

    Python实现将Excel内容批量导出为PDF文件

    目录 序言 实现代码 序言 上一篇咱们实现了多个表格数据合并到一个表格,本次咱们来学习如何将表格数据分开导出为PDF文件. 部分数据 然后需要安装一下这个软件 wkhtmltopdf 不知道怎么下载的可以在电脑端左侧扫一下找到我要 效果展示 数据单独导出为一个PDF 实现代码 import pdfkit import openpyxl import os target_dir = '经销商预算' if not os.path.exists(target_dir): os.mkdir(target

  • vue完成项目后,打包成静态文件的方法

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试:false表示生产环境,正式上线的) 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在dist下面 使用node进行调试 1.在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的htt

  • 用python把ipynb文件转换成pdf文件过程详解

    用python把ipynb文件转换成pdf文件过程详解

    这两天一直在做课件,我个人一直不太喜欢PPT这个东西--能不用就不用,我个人特别崇尚极简风. 谁让我们是程序员呢,所以就爱上了Jupyter写课件,讲道理markdown也是个非常不错的写书格式啊. 安装Jupyter其实非常简单,你会python就应该会用jupyter,起码简单的 pip install jupyter, jupyter notebook 要会对伐- 好那接下来就是使用jupyter了,启动jupyter后,使用浏览器访问相应IP:Port就可以使用了.没错,jupyter就

  • python3如何将docx转换成pdf文件

    本文实例为大家分享了python3将docx转换成pdf文件的具体代码,供大家参考,具体内容如下 直接上代码 # -*- encoding:utf-8 -*- """ author:lgh """ from win32com.client import Dispatch, constants, gencache def doc2pdf(input, output): w = Dispatch('Word.Application') try: #

  • python把ipynb文件转换成pdf文件过程详解

    python把ipynb文件转换成pdf文件过程详解

    这两天一直在做课件,我个人一直不太喜欢PPT这个东西--能不用就不用,我个人特别崇尚极简风. 谁让我们是程序员呢,所以就爱上了Jupyter写课件,讲道理markdown也是个非常不错的写书格式啊. 安装Jupyter其实非常简单,你会python就应该会用jupyter,起码简单的 pip install jupyter, jupyter notebook 要会对伐- 好那接下来就是使用jupyter了,启动jupyter后,使用浏览器访问相应IP:Port就可以使用了.没错,jupyter就

  • winform把Office转成PDF文件

    winform把Office转成PDF文件

    先要把word或ppt转换为pdf: 以pdf的格式展示,防止文件拷贝. 转换方法 1.安装Word.Excel.PowerPoint组件 注意:需安装Microsoft.Office.Interop.Word\Excel\PowerPoint组件. 程序集如下: 2.转换代码 (1)将Word转换为pdf: using Microsoft.Office.Core; using System; using System.IO; using System.Windows.Forms; using

  • C#将PPT文件转换成PDF文件

    这里在提供C#代码,将PPT转成PDF.直接上代码: 要引入Microsoft.Office.Interop.PowerPoint; 版本12.0.0.0: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Runtime.InteropServices; using Microsoft.Office.Interop

  • vue将单页面改造成多页面应用的方法

    问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验.我想要的效果是,查看页面只加载查看页面的代码,不包含管理系统的代码,因此着手将单页面应用改造成多页面应用,这里分享下方法. 1.改造文件目录 改造前: 改造后: assets:这里不变,依然放置公用的静态资源文件:components:这里存放应用下所有的vue组件:pages:这里存放我们的多页面

随机推荐