精华内容
下载资源
问答
  • vue 导出pdf
    2021-09-14 11:02:32

    使用html2canvas和jspdf插件实现

    这个方式是通过html2canvasl来把html页面转换成图片,然后再通过jspdf将图片转换为pdf文件

    这个方法有个非常不好的缺点

    1. 生成的pdf质量不高,画面有些模糊,失真严重
    2. 如果在分页的地方有图片的话,可能会把图片也给你一分为二了
    3. 1. 安装插件加粗样式

    先安装第一个 html2canvas 插件,这个作用是实现将 html 页面转换成 图片

    在你的控制住台输入下面指令

    npm install --save html2canvas
    

    然后再安装第二个插件, 这个插件的作用是将图片转为 pdf

    在你的控制住台输入下面指令

    npm install jspdf --save
    

    2. 创建 htmlToPdf.js 文件

    安装好了上面的两个插件后,在你的项目里创建一个js文件,项目里应该会有个专门放js文件的文件夹,其实你自己找地方放也可以,只要你能找到就行,把 js 文件的名字和我写的一样就行
    然后记住你这个文件的路径 列:(‘src/scrip

    更多相关内容
  • vue导出pdf

    2021-12-14 14:54:58
    将图片生成pdf在这里插入代码片 npm install jspdf --save 二、定义函数,创建两个工具js文件 新建utils文件夹 将htmlToPdf.js放入 htmlToPdf.js: /* eslint-disable */ //不使用JQuery版的 import ...

    一、安装

    第一个.将页面html转换成图片
    npm install --save html2canvas 
    第二个.将图片生成pdf在这里插入代码片
    npm install jspdf --save
    

    二、定义函数,创建两个工具js文件
    新建utils文件夹 将htmlToPdf.js放入
    htmlToPdf.js:

    /* eslint-disable */
    //不使用JQuery版的
    import html2canvas from 'html2canvas';
    import JsPDF from 'jspdf';
    
    /**
     * @param  ele          要生成 pdf 的DOM元素(容器)
     * @param  padfName     PDF文件生成后的文件名字
     * */
    
    function downloadPDF(ele, pdfName){
    
        let eleW = ele.offsetWidth;// 获得该容器的宽
        let eleH = ele.offsetHeight;// 获得该容器的高
        let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
        let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
    
        var canvas = document.createElement("canvas");
        var abs = 0;
    
        let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
        let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
    
        if(win_out>win_in){
            // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
            abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
            // console.log(a, '新abs');
        }
        canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
        canvas.height = eleH * 2;
    
        var context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
        // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
        // translate的时候,要把这个差值去掉
    
        // html2canvas(element).then( (canvas)=>{ //报错
        // html2canvas(element[0]).then( (canvas)=>{
        html2canvas( ele, {
            dpi: 300,
            // allowTaint: true,  //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的
            useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
        } ).then( (canvas)=>{
            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 = 595.28/contentWidth * contentHeight;
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            var pdf = new JsPDF('', 'pt', 'a4');
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
                //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
        })
    }
    export default {
        downloadPDF
    }
    

    三、在需要导出pdf的页面引用

    import htmlToPdf from '@/unit/htmlToPdf'
    methods: {
    		//点击下载
            handleDown() {
            //document.querySelector("#drawerPdf") 为要转成pdf的HTML,获取其节点
                htmlToPdf.downloadPDF(document.querySelector("#drawerPdf"), "报告");
            },
    }
    
    展开全文
  • vue将页面导出pdf,vue导出pdf

    千次阅读 热门讨论 2021-09-07 10:56:24
    vue导出pdf 新需求:需要前端下载把当前html下载成pdf文件 菜鸟觉得牛逼啊,这必须记录下来嗷嗷嗷嗷 1、第一步:我们要添加两个模块 //第一个:将页面html转换成图片 npm install --save html2canvas //第二个:将...

    vue导出pdf

    新需求:需要前端下载把当前html下载成pdf文件
    方法一: 菜鸟觉得牛逼啊,这必须记录下来嗷嗷嗷嗷
    1、第一步:我们要添加两个模块

    //第一个:将页面html转换成图片
    npm install --save html2canvas
    //第二个:将图片生成pdf
    npm install jspdf --save
    

    2、第二步:

    定义全局函数…创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf’)中
    htmlToPdf.js文件内容:

    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
      install(Vue, options) {
        Vue.prototype.getPdf = function () {
          var title = this.htmlTitle
          // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id 
          //只下载id为pdfDom的内容
          html2Canvas(document.body, { //body是下载整个界面
            useCORS: true, //是否尝试使用CORS从服务器加载图像
            allowTaint: true,
            dpi: 300, //解决生产图片模糊
            // width: 490, //canvas宽度
            // height: 240, //canvas高度
            // x: 0, //x坐标
            // y: 0, //y坐标
            async: false, //是否异步解析和呈现元素
            foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染
          }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
            let leftHeight = contentHeight //未生成pdf的html页面高度
            let position = 0 //pdf页面偏移
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                if (leftHeight > 0) {
                  PDF.addPage()
                }
              }
            }
            PDF.save(title + '.pdf')
          })
        }
      }
    }
    

    3、第三步:在main.js中使用我们定义的函数文件

    import htmlToPdf from '@/components/utils/htmlToPdf'
    Vue.use(htmlToPdf)
    

    4、第四步:在需要的导出的页面,调用我们在htmlToPdf.js定义的getPdf方法即可.
    我是在登录界面调的,所以我在Login.html的模板中写的

       <template>
         <el-button type="primary" @click="getPdf()">下载pdf</el-button>
        <!-- 给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分 -->
        <div class="login_box" id="pdfDom">
       <!--图片区域-->
       <div class="avatar_box">
            <img src="../assets/logo.png" />
          </div>
        </div>[添加链接描述](https://www.jianshu.com/p/dd120b65446a)
        </template>
    

    然后在

       <script>
    export default {
      data() {
        return {
          htmlTitle: "页面导出PDF文件名", //这是定义导出的名字,不写这个默认下载的名字是undefinded
            }
          }
        }
      </script>
    

    时隔一年,我又回来了,虽然还是菜,但是感觉比之前进步了不少,还得继续加油,上一年没继续写,是因为去了一件信息安全要求比较高的公司,不许上微信,不允许贴代码啥的,回到家我又没记住那代码,所以就没更,现在换了一家公司,以后我会坚持的!一起加油啊!!


    方法二:
    我又来了,有个需求下载pdf,我放在el-dialog里面了,页面是这样的:
    在这里插入图片描述
    想要下载的样子是这样的:
    在这里插入图片描述
    但是我作死搞了很久 ,用了第一种方法就是不行,下载的pdf文档只有黑块没有内容,然后我琢磨了一天,终于搞好了。下面是方法二:
    在这里插入图片描述
    1、第一步:我们要添加两个模块

    //第一个:将页面html转换成图片
    npm install --save html2canvas
    //第二个:将图片生成pdf
    npm install jspdf --save
    

    第二步:在html中你想要的地方加一个ref=“orderForm1”

      <div class="orderFoodInfoTop pdfDom" ref="orderForm1">比如这是我想下载的内容</div>
       <el-button @click="pdfDownload">下载</el-button>//下载按钮
    

    这是方法在methods中写的:

    // 下载pdf
        pdfDownload() {
          let _this = this
          let myBox = this.$refs.orderForm1; //获取ref里面的内容
          html2canvas(myBox, {
            useCORS: true, //是否尝试使用CORS从服务器加载图像
            allowTaint: true,
            dpi: 300, //解决生产图片模糊
            scale: 3, //清晰度--放大倍数
          }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
            let leftHeight = contentHeight //未生成pdf的html页面高度
            let position = 0 //pdf页面偏移
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            // let imgWidth = 595.28
            let imgWidth = 560.28  //宽度
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
    
            // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                if (leftHeight > 0) {
                  PDF.addPage()
                }
              }
            }
            PDF.save(_this.$t('食堂利用明细') + '.pdf')//下载标题
          });
        },
    

    _this.$t()你们可以不用管,这是我国际化的组件用法,这就是全部方法了。

    展开全文
  • 在实际应用中,可能用户希望将系统中一个页面展示的所有数据报 表,用PDF的文件格式下载下来,以便于其他用途。...本篇描述的就是,在Vue 2.0 的项目中,遇到类似的需求, 如何将需要的部分页面内容导出PDF文件
  • 最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 、我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install –save html2canvas 3 第二个.将...
  • vue 导出pdf文件

    2022-03-01 15:21:10
    1.在终端安装html2canvas插件 npm install --save html2canvas npm install jspdf --saved (或者npm i ...2.创建htmlToPdf.js... import JsPDF from 'jspdf'; ...* @param ele 要生成 pdf 的DOM元素(容器) * @p

    1.在终端安装html2canvas插件
    npm install --save html2canvas
    npm install jspdf --saved
    (或者npm i html2canvas jspdf --save-dev )

    2.创建htmlToPdf.js文件

    import html2canvas from 'html2canvas';
    import JsPDF from 'jspdf';
    /**
    * @param  ele          要生成 pdf 的DOM元素(容器)
    * @param  padfName    PDF文件生成后的文件名字
    * */
    function downloadPDF(ele, pdfName) {
        let eleW = ele.offsetWidth;// 获得该容器的宽
        let eleH = ele.offsetHeight;// 获得该容器的高
        //  let eleR =  document.querySelector('#exportPdf')   //容器真实高度
        let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
        let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
        var canvas = document.createElement("canvas");
        var abs = 0;
        let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
        let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
        if (win_out > win_in) {
            // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
            abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
            // console.log(a, '新abs');
        }
        canvas.width = eleW* 2 ; // 将画布宽&&高放大两倍
        canvas.height = eleH * 2;
        var context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
        // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
        // translate的时候,要把这个差值去掉
        html2canvas(ele, {
            dpi: 300,
            // allowTaint: true,  //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的
            useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
        }).then((canvas) => {
            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 = 595.28 / contentWidth * contentHeight;
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            var pdf = new JsPDF('', 'pt', 'a4');
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
                //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
        })
    }
    export default {
        downloadPDF
    }
    
    

    3.在vue页面引用

    //导出按钮
    <el-button type="success" size="mini" @click="toExportPdf">pdf</el-button>
    
    <el-col :span="24" v-if="cxtrue == true" style="padding: 10px;" class="toptable"  id="exportPdf">
    // 导出的内容
    </el-col>
    
    import htmlToPdf from '../../../utils/htmlToPdf';
                toExportPdf() {  
               htmlToPdf.downloadPDF( document.querySelector('#exportPdf'),'1-7 各级行政机构领导职数和在职人数反查明细表');
        },
    

    备注:若导出内容部分含横向滚动条可新建一个不含滚动条的div,不透明度设为0( position: fixed;
    opacity:0 ),覆盖在原div上,并导出新建的div。
    或者先将滚动条置顶
    $(window).scrollTop(0); // jQuery 的方法
    document.body.scrollTop = 0; // IE的
    document.documentElement.scrollTop = 0; // 其他

    展开全文
  • 主要介绍了Vue导出页面为PDF格式的实现思路,其实思路也很简单,就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
  • 前端VUE导出PDF

    2021-07-29 09:12:30
    1、Vue 导出PDF文件,导出pdf模糊,导出图片不全,导出不清晰问题终极解决方案 (作者:IT程序员的日常) 2、vue 项目导出pdf两种方式 (作者:丿乐灬学) 3、一个导出pdf的完整demo,可以直接拿来使用 (作者:丿乐灬...
  • 前端vue导出PDF

    2021-11-29 20:06:52
    async function getPdf(title,domName,_this) {//文件名,'name' // return let a4HeightRef=0 let leftHeight=0 let position=0 let pdfProgress=1 let a4Width=831.89 let a4Height=579.28 let canvasList=[] ...
  • vue导出pdf流空白问题

    2022-03-01 16:33:26
    vue导出pdf流空白问题
  • 主要为大家详细介绍了Vue如何将页面导出PDF文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 导出PDF文件终极解决方案 关于 Vue 导出 Echarts 统计图为 pdf 格式,网上许多作者给出了解决方案,但是都不能解决一些根本问题,
  • vue导出pdf格式

    2021-05-14 14:53:11
    vue导出pdf格式 1、下载依赖 a.将html页面转换成图片 npm install --save html2canvas b.将图片生成pdf npm install jspdf --save 2、在utils下面创建一个名字叫个htmlToPdf.js的文件内容如下 import ...
  • vue导出pdf,分页被截断 ,图片不显示的问题,已解决。直接上步骤,亲测有效。第一步 安装所需要的用到的插件1 . 将页面HTML 转换成图片 npm i html2canvas -S2 . 将图片生成pdf npm i jspdf -S第二步创建pdf.js文件...
  • vue导出pdf文件(汇总)

    千次阅读 2020-07-23 20:48:27
    方法一:vue-print-nb插件 官网地址 npm安装 npm install vue-print-nb --save main.js全局注册 import Print from 'vue-print-nb' Vue.use(Print); ...导出pdf</button> <div id="printMe
  • vue导出pdf文件

    2020-11-19 11:04:16
    vue导出pdf文件 简单记录一次vue导出pdf文件 1、下载包: npm install html2canvas npm install jspdf 2、编写js import html2Canvas from ‘html2canvas’ import JsPDF from ‘jspdf’ data() { return { // 填入...
  • vue 导出PDF格式

    千次阅读 2019-02-28 00:12:12
    1、npm安装两个模块 ...cnpm install jspdf --save // 将图片生成pdf 2、定义全局函数..创建一个htmlToPdf.js文件在指定位置 import html2Canvas from 'html2canvas' import JsPDF from 'js...
  • 看大神如何使用vue导出pdf

    万次阅读 2020-03-18 17:21:30
    前端pdf https://blog.csdn.net/qq_37880968/article/details/94626001
  • vue导出pdf(自定义页面大小)

    千次阅读 2020-08-17 10:33:02
    import JsPDF from 'jspdf' ...导出函数 (先html2canvas将页面截图,然后用jspdf导出) exportPDF(){ // let shareContent = document.body,//需要截图的包裹的(原生的)DOM 对象 let shareContent = document.get
  • vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...
  • 基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太...两种导出pdf清晰度对比: --------------第一张图 html2canvas +jspdf;------------------------------------.
  • Vue导出PDF

    2021-03-27 11:11:13
    使用vue-to-pdf https://www.npmjs.com/package/vue-to-pdf npm i vue-to-pdf --save 引入: import vueToPdf from 'vue-to-pdf'; Vue.use(vueToPdf); 使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,708
精华内容 1,083
关键字:

vue导出pdf

友情链接: avi_player.rar