文档章节

vue中将网页打印成pdf

激烈的海胆
 激烈的海胆
发布于 2017/06/15 14:29
字数 159
阅读 756
收藏 1
<template>
<div class="pdf-wrap" id="pdfWrap">
  <button v-on:click="getPdf">点击下载PDF</button>
  <div class="pdf-dom" id="pdfDom"></div>
</div>
</template>
<style lang="scss" scoped>

</style>
<script type="text/ecmascript-6">
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'

export default {
  name: 'home',

  components: {
    chead
  },
  data () {
    return {
      msg: 'home'
    }
  },
  methods: {
    getPdf: () => {
      let pdfDom = document.querySelector('#home')
      html2canvas(pdfDom, {
        onrendered: 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('123.pdf')
        }
      })
      html2canvas()
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        this.getPdf()
      })
    })
  }
}

</script>

首先需要需要

yarn add html2canvas jspdf

© 著作权归作者所有

激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
Vue 2.0 的可变彩色 svg 图标方案 - vue-svg-icon

vue-svg-icon 是轻量的 Vue 2.0 多色动态 svg 图标方案。 特点: 可即时在illustrator中编辑svg图片 可通过css的color属性动态地调整svg中某一部分的颜色 用法: 1. 安装 npm install vue-sv...

cenkai88
2016/12/29
2.1K
0
vue-pdf的3.3.1版本build后多生成168个js文件

当同事使用vue-pdf来浏览pdf之后,就发现build之后一堆散乱的js文件,真可怕! 果然google之后是它的原因。参考:Vue-pdf create 168 excess bundles in webpack。 解决方案: 安装vue-pdf 3.0...

陈蒙的技术空间
2018/07/11
0
0
越写悦快乐之Vue项目如何集成PDF组件

今天的越写悦快乐系列文章为大家带来ue项目如何集成PDF组件的文章。做过前端开发的小伙伴都知道,我们如何在页面中集成PDF文件,也就是读取二进制数据并渲染到页面上,我们可以使用来快速构建...

韬声依旧在路上
06/21
0
0
在vue2.0中使用html2canvas、jspdf导出pdf和图片

在vue中使用html2canvas.js将网页导出为图片和pdf 1.安装html2canvas npm install html2canvas --save-dev npm install jspdf --save-dev 2.1(导出为图片)新建一个htmlToImg.js,引入html2ca......

夏日的风
2018/12/20
0
0
webstorm和vue中es6语法报错的解决方式

1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.......

peakedness丶
2018/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Podman 使用指南

> 原文链接:Podman 使用指南 Podman 原来是 CRI-O 项目的一部分,后来被分离成一个单独的项目叫 libpod。Podman 的使用体验和 Docker 类似,不同的是 Podman 没有 daemon。以前使用 Docker...

米开朗基杨
41分钟前
5
0
拯救 项目经理个人时间的5个技巧

优秀的项目经理都有一个共同点,那就是良好的时间管理能力。专业的项目经理会确保他们的时间投入富有成效,尽可能避免时间浪费。 时间管理叫做GTD,即Getting Things Done——“把事情做完”...

Airship
今天
6
0
LNMP环境介绍,Mariadb安装,服务管理,mariadb安装3

LNMP环境介绍 Nginx 处理的请求有两种,分为 静态与动态 图片,js,css,视频,音频,flash 等都是静态请求,这些数据都不是保存在数据库里面的 动态请求一般来说,需要的数据是在数据库里面...

doomcat
今天
1
0
前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
7
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部