VUE 网页生成 PDF[通俗易懂]

VUE 网页生成 PDF[通俗易懂]保存当前网页为PDF格式到本地一、安装依赖1.npminstall–savehtml2canvas//作用是html转图片2.npminstalljspdf–save//再将图片转为pdf二、设置格式函数importhtml2Canvasfrom’html2canvas’importJsPDFfrom’jspdf’exportdef…

大家好,又见面了,我是你们的朋友全栈君。

保存当前网页为PDF格式到本地

一、安装依赖

1. npm install --save html2canvas  // 作用是html转图片
2. npm install jspdf --save  // 再将图片转为pdf

在这里插入图片描述

二、设置格式函数

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

export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (title) {
      html2Canvas(document.querySelector('#pdfDom'), {
        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')
      }
      )
    }
  }
}

在这里插入图片描述

三、main.js引入

import htmlToPdf from './htmlToPdf';

Vue.use(htmlToPdf);

在这里插入图片描述

四、运用

在这里插入图片描述

五、遇到问题

在这里插入图片描述
如图,在导出文件时,发现网络错误,可能是因为下载器不支持,首先换浏览器试一次,如果可以下载,则就是下载器不支持。

作者微信公众号“怪東瓜”,有问题私聊,我们共同探讨实用技术,练出最美身材。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145983.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Ubuntu 忘记root密码_ubuntu怎么获取root权限

    Ubuntu 忘记root密码_ubuntu怎么获取root权限Ubuntu14.04中root密码忘记解决方法[转载+17.04亲测可用]Ubuntu14.04中root密码忘记解决方法Ubuntu 14.04中root密码忘记解决方法方法一:如果用户具有sudo权限,那么直接可以运行如下命令:#sudosuroot#passwd#更改密码或者直接运行sudopasswdroot命令就可以直接更改root密码…

    2022年10月29日
  • cobol语言基础教程_boo语言

    cobol语言基础教程_boo语言一、基础知识1.程序结构division-部section-节paragraphs-段2.四个部(1)IDENTIFICATIONDIVISION程序的标识部,位于程序的顶部,主要定义了程序的Id,作者等信息。(2)ENVIRONMENTDIVISION环境部声明了程序运行的环境,指定了程序的输入和输出文件,有两个节组成,配置节和输入输出节①配置节由两个段组成,分别是指定了程序编译的环境节(源计算机)和运行环境(目标计算机)②输入输出节由两个段组成分别是文

    2022年10月28日
  • 世界地图行政区划图_世界行政区划图册

    世界地图行政区划图_世界行政区划图册序号 国家 省 城市 4007 法国 上法兰西大区   4008 法国 上法兰西大区 万格勒 4009 法国 上法兰西大区 乌普利讷 4010 法国 上法兰西大区 于吕什 4011 法国 上法兰西大区 代兰库尔 4012 法国 上法兰西大区 代夫勒 4013 法国 上法兰西大区 伊夫里莱唐普尔 4014 法国 上法兰西大区

  • 相机标定基础

    相机标定基础一.什么是摄像机标定从二维图像中恢复物体的三维信息,必须要知道空间坐标系中的物体点同它在图像平面上像点之间的对应关系,而这个对应关系是由摄像机的成像几何模型所决定的,这些几何模型参数就是摄像机参数。在大多数情况下这些参数必须通过实验才能得到,这个过程被称为摄像机标定。摄像机标定就是确定摄像机内部几何和光学特性(内部参数)以及摄像机坐标系相对于世界坐标系的三维位置和方向(外部参数)的过程。

  • 明翰英国硕士常见词汇与固定搭配V1.1(持续更新)

    明翰英国硕士常见词汇与固定搭配V1.1(持续更新)文章目录传送门正文`熟词僻义`学术词汇`论文词汇`学校词汇计算机词汇生活词汇健康饮食犯罪网络用语口语俚语传送门杨明翰英语教学系列之方法篇杨明翰英语教学系列之音标篇杨明翰英语教学系列之名词篇杨明翰英语教学系列之动词篇杨明翰英语教学系列之形容词与副词篇杨明翰英语教学系列之冠词篇杨明翰英语教学系列之代词篇杨明翰英语教学系列之介词篇杨明翰英语教学系列之连词篇杨明翰英语教学系列之数词篇杨明翰英语教学系列之时态与语态篇杨明翰英语教学系列之句法篇杨明翰英语教学系列之口语篇杨明翰英语教学系

  • C语言 strstr函数的用法及模拟实现strstr函数「建议收藏」

    C语言 strstr函数的用法及模拟实现strstr函数「建议收藏」C语言strstr函数的用法及模拟实现strstr函数一、strstr函数的用法二、模拟实现strstr函数的功能一、strstr函数的用法1.strstr函数原型:char*strstr(constchar*str1,constchar*str2)2.功能:strstr()是一个参数为两个字符指针类型,返回值是char*类型的函数,它用于找到子串(str2)在一个字符串(str1)中第一次出现的位置。这里因为传进来的地址指向的内容不会在发生改变,所以我们在两个形参(char*)前加上c

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号