VIP用户交流群:462197261热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
  • 当前位置:
  • 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(/:(.*?);/)[1],
             bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
             u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type: mime})
           },
        downloadResult(name) {
            let canvasID = document.body
            let a = document.createElement('a');
            html2canvas(canvasID).then(canvas => {
             let dom = document.body.appendChild(canvas);
             dom.style.display = "none";
             a.style.display = "none";
             document.body.removeChild(dom);
             let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
             a.setAttribute("href", URL.createObjectURL(blob));
             a.setAttribute("download", name + ".png")
             document.body.appendChild(a);
             a.click();
             URL.revokeObjectURL(blob);
             document.body.removeChild(a);
            });
           },
         printOut(name) {
         // 个人观察只是截取可见范围以及以下的区域,所以先将滚动条置顶
           $(window).scrollTop(0); // jQuery 的方法
           document.body.scrollTop = 0; // IE的
           document.documentElement.scrollTop = 0; // 其他
           this.downloadResult(name)
        },

    导出为PDF

    1.将页面html转换成图片

    npm install html2canvas --save

    2.将图片生成pdf

    npm install jspdf --save

    3.在需要导出的页面引入

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

    在 methods 中添加方法

    printOut(name) {
        let shareContent = document.body,//需要截图的包裹的(原生的)DOM 对象
         width = shareContent.clientWidth, //获取dom 宽度
         height = shareContent.clientHeight, //获取dom 高度
         canvas = document.createElement("canvas"), //创建一个canvas节点
         scale = 2; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.style.width = shareContent.clientWidth * scale + "px";
        canvas.style.height = shareContent.clientHeight * scale + "px";
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        let opts = {
         scale: scale, // 添加的scale 参数
         canvas: canvas, //自定义 canvas
         logging: false, //日志开关,便于查看html2canvas的内部执行流程
         width: width, //dom 原始宽度
         height: height,
         useCORS: true, // 【重要】开启跨域配置
        };
    
        html2Canvas(shareContent, opts).then(() => {
         var contentWidth = canvas.width;
         var contentHeight = canvas.height;
         //一页pdf显示html页面生成的canvas高度;
         var pageHeight = (contentWidth / 592.28) * 841.89;
         //未生成pdf的html页面高度
         var leftHeight = contentHeight;
         //页面偏移
         var position = 0;
         //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
         var imgWidth = 595.28;
         var imgHeight = (592.28 / contentWidth) * contentHeight;
         var pageData = canvas.toDataURL("image/jpeg", 1.0);
         var 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(name + ".pdf"); // 这里是导出的文件名
        });
       },

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • vue使用pdfjs显示PDF可复制的实现方法
    • Vue项目pdf(base64)转图片遇到的问题及解决方法
    • vue实现pdf导出解决生成canvas模糊等问题(推荐)
    • vue实现word,pdf文件的导出功能
    • Vue导出页面为PDF格式的实现思路
    • vue导出html、word和pdf的实现代码
    • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
    • vue中如何实现pdf文件预览的方法
    • Vue网页html转换PDF(最低兼容ie10)的思路详解
    • vue2.0全局组件之pdf详解
    • vue中将网页打印成pdf实例代码

    广而告之:
    热门推荐:
    JS中事件冒泡和事件捕获介绍

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签···

    php数组应用之比较两个时间的相减排序

    $kkk = custom_tuijian("2008-08-15",date("Y-m-d")); //echo date("Y-m-d"); //print_r($kkk); function custom_tuijian($a,$b) { $sql = "select `r`.*,`a`.`articlename`,`a`.`author` from `phpsir_record1` `r` inner join `jieqi_article_article` `a` on `r`.`bo···

    php 获取本机外网/公网IP的代码

    大家一般都是用$_SERVER['REMOTE_ADDR']来获取用户IP, 但是如果使用了反向代理的,HTTP头中REMOTE_ADDR就不是用户的地址,反而是上一级代理的地址了。 经过我的研究有两种方法来获取用户的真实外网IP。 方法一:curl 复制代码 代码如下: function get_onlineip() { $···

    Vue2.5通过json文件读取数据的方法

    1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require(‘portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取···

    PHP实现的贪婪算法实例

    本文实例讲述了PHP实现的贪婪算法。分享给大家供大家参考,具体如下: 背景介绍:贪婪算法与数据结构知识库算法可以说是离我们生活最近的一种算法,人总是贪婪的嘛,所以这种算法的设计是很符合人性的。之所以这么说,是因为人们会在生活中有意无意的使用贪婪算法来解决问题。···

    jQuery实现的选择商品飞入文本框动画效果完整实例

    本文实例讲述了jQuery实现的选择商品飞入文本框动画效果。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh···

    php统计时间和内存使用情况示例分享

    复制代码 代码如下:/** * 记录和统计时间(微秒)和内存使用情况 * 使用方法: * <code> * G('begin'); // 记录开始标记位 * // ... 区间运行代码 * G('end'); // 记录结束标签位 * echo G('begin','end',6); // 统计区间运行时···

    html中用href 实现点击链接弹出文件下载对话框

    今天又学了一招,以前不知道,就是做过的东西太少了…… 目标:实现点击链接弹出文件下载对话框 代码: 复制代码 代码如下: <html> <head>代码下载</head> <title>代码下载</title> <body> <a href="Web.rar" >downl···

    JS基于正则表达式的替换操作(replace)用法示例

    本文实例讲述了JS基于正则表达式的替换操作(replace)用法。分享给大家供大家参考,具体如下: 正则表达式替换使用的是replace()方法。Replace()方法是用一些字符途欢另一些字符 语法:stringObject.replace(regexp,replacement) regexp 必需。规定了要替换的模式的 RegExp ···

    PHP合并数组的2种方法小结

    前言 在此前合并数组我一直用的是array_merge()这个函数,但最近我在换工作的时候遇到一道合并数组的面试题,我当时想的是将两个数组先转化为字符串,合并后再转化为数组输出,面试官说这个思路不太对,完了bulabula讲了一下数组基础的东西,然后确实是因为经验问题,或者是代···