pdf转图片 react - CSDN
  • react中使用pdf图片预览遇到的一些坑 需求 近期项目中新需求要用到pdf图片的预览功能,由于项目时间较久,react用的是15.5.4版本,项目接口返回的数据是文件流。 使用插件 这里使用react-pdf插件和react-images...

    react中使用pdf和图片预览遇到的一些坑

    需求

    近期项目中新需求要用到pdf和图片的预览功能,由于项目时间较久,react用的是15.5.4版本,项目接口返回的数据是文件流。

    使用插件

    这里使用react-pdf插件和react-images插件

    因为react版本是15.5.4,所以不能使用最新版,这里使用的的是 react-pdf@3.0.6,这个是3版本的最后一个版本

    ract-images使用的最新版

    安装

    npm i -S react-pdf@3.0.6 ract-iamges
    

    遇到的坑

    • pdf预览的时候 浏览器控制台 network 有个 pdfjs.worker.js 报红 404
      查看react-pdf文档,1、需要安装 pdfjs-dist,2、忽略pdfjs.worker.js

      试了第一种方法,没啥用,仍然报错,所以使用第二种方法
      import { Document } from 'react-pdf/dist/entry.noworker'

    • 解决了上面的问题之后,使用本地pdf文件试了正常,完美。。。然而,换了线上地址之后,又双叒叕 报错了

      Unexpected server response (500) while retrieving PDF

      这个问题是由于没有权限,由于链接是直接写在<Document file={url}/>标签中,无法卸载请求头和cookie,查看react-pdf的github文档,发现file可以是一个对象。对象中可以添加请求头和cookie相关信息。

    点击这里查看代码

    展开全文
  • React前端html导出pdf

    千次阅读 2019-06-06 15:16:57
    但由于前端导出的全部是图片,文字无法复制,最终由后端实现导出。 github地址:https://github.com/eKoopmans/html2pdf.js package.json引入"html2pdf.js": "^0.9.1" 具体代码如下: import html2pdf from '...

    html导出PDF

    最近做了个知识管理功能,其中有个需求是将文档导出为pdf,所以就前端实现了一下。但由于前端导出的全部是图片,文字无法复制,最终由后端实现导出。

    github地址:https://github.com/eKoopmans/html2pdf.js

    package.json引入"html2pdf.js": "^0.9.1"

    具体代码如下:

    import html2pdf from 'html2pdf.js';
    
    exportPdf = () => {
    	// 要导出的dom节点,注意如果使用class控制样式,一定css规则
        const element = document.getElementById('doc');
        // 导出配置
        const opt = {
          margin: 1,
          filename: '导出的pdf名称',
          image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
          html2canvas: { scale: 2, useCORS: true }, // useCORS很重要,解决文档中图片跨域问题
          jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
        };
        if (element) {
          html2pdf().set(opt).from(element).save(); // 导出
        }
      };
    
    展开全文
  • 利用html2canvas 和 jspdf 实现html转pdf let dom = document.getElementById("pdf"); html2canvas(dom).then(canvas => { let url = canvas.toDataURL("image/png",1); // let imgHtml = new Image(); /...

    利用html2canvas 和 jspdf 实现html转pdf

    let dom = document.getElementById("pdf");
    		html2canvas(dom).then(canvas => {
    		let url = canvas.toDataURL("image/png",1);
    		// let imgHtml = new Image();
    		// imgHtml.src = url;
    		// dom.innerHTML = '';
    		// dom.appendChild(imgHtml)
    		let pdf = new jsPDF('', 'pt', 'a4');
    		pdf.addImage(url, 'png', 10, 60)
    		pdf.save('www.pdf');
    		});
    

    注释的部分是转图片

    完整代码

    <!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/xhtml">
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>个人简历</title> 
      <style>
    #title{
    color:#F00;
    font-size:28px
    }
    .secondTitle{
    
    
    font-size:18px;
    background-color:#09F;
    text-align:center;
    }
    
    
    body{ 
    text-align:center;
    font-size:16px;
    font-family:SimSun;
    
    }
    ul{
    text-align:left;}
    li{
    text-align:left;}
    .info{
    text-align:left;
    font-size:16px;
    }
    td{
    border-color:#09F;
    }
    tr{
    border-color:#09F;}
    
    </style> 
      <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> 
      <script type="text/javascript">
         function HtmlToPdf(){
    		let dom = document.getElementById("pdf");
    		html2canvas(dom).then(canvas => {
    		let url = canvas.toDataURL("image/png",1);
    		// let imgHtml = new Image();
    		// imgHtml.src = url;
    		// dom.innerHTML = '';
    		// dom.appendChild(imgHtml)
    		let pdf = new jsPDF('', 'pt', 'a4');
    		pdf.addImage(url, 'png', 10, 60)
    		pdf.save('www.pdf');
    		});
    	 }
    </script> 
     </head> 
     <body> 
      <strong onclick="HtmlToPdf()"> 转储pdf </strong> 
      <table id="pdf" align="center" width="660" border="0" bordercolor="#00CCFF" frame="box"> 
       <caption id="title"> 
        <strong> 个人简历</strong> 
       </caption> 
       <tbody> 
        <tr> 
         <td colspan="5" class="secondTitle">基本资料</td> 
        </tr> 
        <tr> 
         <td width="116">姓&nbsp;名</td> 
         <td width="134">刘志强</td> 
         <td width="79">性&nbsp;别</td> 
         <td width="166">男</td> 
         <td width="129" rowspan="5"><img src="./25731425.jpg" width="105" height="150" alt="1" /></td> 
        </tr> 
        <tr> 
         <td>年&nbsp;龄</td> 
         <td>24</td> 
         <td>籍贯</td> 
         <td>汉族</td> 
        </tr> 
        <tr> 
         <td>民&nbsp;族</td> 
         <td>汉</td> 
         <td>政治面貌</td> 
         <td>团员</td> 
        </tr> 
        <tr> 
         <td>毕业学校</td> 
         <td colspan="3">临沂大学</td> 
        </tr> 
        <tr> 
         <td>专&nbsp;业</td> 
         <td>软件技术</td> 
         <td>学&nbsp;历</td> 
         <td>专科</td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">个人技能</td> 
        </tr> 
        <tr> 
         <td>个人技能</td> 
         <td colspan="4"> 
          <ul> 
           <li>熟练掌握Java</li> 
           <li>熟练掌握Linux系统和docker等技术</li> 
           <li>熟练掌握svn,git,maven等技术</li> 
           <li>熟练掌握idea,myeclipse等开发工具</li> 
           <li>熟练掌握spring struts hibernate,springMvc,springBoot,springcloud,Mybatis,Lavavel 等各种服务端框架</li> 
           <li>基础掌握asp php</li> 
           <li>熟练掌握SQl Server,mysql,redis,memcached等关系型非关系型数据库</li> 
           <li>熟练掌握react vue html js jquey css 等前端技术</li> 
           <li>熟练掌握jsp freemarker velocity等模板技术</li> 
          </ul> </td> 
        </tr> 
        <tr> 
         <td>个人专长</td> 
         <td colspan="4" class="info"> 逻辑能力学习能力强,热爱学习掌握新的技术 </td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">项目经验</td> 
        </tr> 
        <tr> 
         <td>年月</td> 
         <td>项目名称</td> 
         <td colspan="3">项目说明</td> 
        </tr> 
        <tr> 
         <td>2013年</td> 
         <td>学生管理系统</td> 
         <td colspan="3"> 实现管理员登录注册<br /> 实现学生的增删改查 </td> 
        </tr> 
        <tr> 
         <td>2014年</td> 
         <td>二手房交易系统</td> 
         <td colspan="3"> 实现用户的注册登录<br /> 实现管理员帐号<br /> 实现用户购买寄售房屋 房屋信息的显示(分页)<br /> </td> 
        </tr> 
        <tr> 
         <td>2015年</td> 
         <td>捕鱼达人</td> 
         <td colspan="3"> 捕鱼达人基本功能的实现 </td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">实践与实习</td> 
        </tr> 
        <tr> 
         <td>2011.6-2012.9</td> 
         <td colspan="4"></td> 
        </tr> 
        <tr> 
         <td>2012.6-2013.9</td> 
         <td colspan="4"></td> 
        </tr> 
        <tr> 
         <td>2014.6-2015.9</td> 
         <td colspan="4"></td> 
        </tr> 
        <tr> 
         <td>2015.9-2015.1</td> 
         <td colspan="4"></td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">个人爱好</td> 
        </tr> 
        <tr> 
         <td>兴趣爱好</td> 
         <td colspan="4">游戏、篮球</td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">自我评价</td> 
        </tr> 
        <tr> 
         <td colspan="5"> </td> 
        </tr> 
        <tr> 
         <td colspan="5" class="secondTitle">联系方式</td> 
        </tr> 
        <tr> 
         <td>移动电话</td> 
         <td>157***</td> 
         <td>QQ</td> 
         <td colspan="2">450**</td> 
        </tr> 
        <tr> 
         <td>e-mail</td> 
         <td>xiaoshidebukuai@163.com</td> 
         <td>CSDN</td> 
         <td colspan="2">xiaoshidetaikuai20</td> 
        </tr> 
       </tbody> 
      </table>  
     </body>
    </html>
    
    展开全文
  • React前端转PDF

    2019-12-06 16:48:38
    import html2pdf from 'html2pdf.js'; exportPdf = () => { // 要导出的dom节点,注意如果使用class控制样式,一定css规则 const element = document.getElementById('doc'); // 导出配置 const opt = { ...
    import html2pdf from 'html2pdf.js';
    
    exportPdf = () => {
    	// 要导出的dom节点,注意如果使用class控制样式,一定css规则
        const element = document.getElementById('doc');
        // 导出配置
        const opt = {
          margin: 1,
          filename: '导出的pdf名称',
          image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
          html2canvas: { scale: 2, useCORS: true }, // useCORS很重要,解决文档中图片跨域问题
          jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
        };
        if (element) {
          html2pdf().set(opt).from(element).save(); // 导出
        }
      };
    

     

    展开全文
  • yarn add react-pdf-js 2.引入 import PDF from 'react-pdf-js'; 3.直接显示pdf文件 const pdfurl = require("../components/读后感.pdf"); <PDF file={pdfurl} scale={0.5}/> 4.通过点击按钮显示pdf文件 ...
  • 首先自行安装一下 html2canvas & jspdf import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; export default ( target, pdfName = 'guanrongjia', successCallback = () =>... errorC...
  • 在工作当中,难免会遇到很多的问题,就比如PDF怎么转换成图片这个问题,那么最简单的解决方法,你知道吗?今天小编就分享给你最简单的方法首先准备材料:PDF文件数个、电脑一台借助的工具是:PDF转换器(迅捷PDF转换...
  • React实现浏览器阅读PDF文件

    千次阅读 2019-07-19 19:55:03
    在项目实践中,往往需要在线预览PDF文件。本人将项目中遇到的开发难点做以整理。方便自己,欢迎各位同仁实践交流。React小白一枚,大佬勿喷! 一、PDF文件直接预览 条件:提供的PDF访问路径(URL)是可通过浏览器直接...
  • react pdf预览

    千次阅读 2019-10-12 14:00:50
    pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于react项目来说,pdf.js的文件要放在静态文件夹下,文件较...
  • 由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的react,后端 是接口的方式,只能选择base64这种方式,而且也方便可以存各种格式。 1.Reactreact-pdf-js安装官网 大家可以点进去,然后里面有介绍...
  • npm install react-pdf 2.引入依赖包 代码如下(示例): import { Document, Page } from 'react-pdf'; 2.预览pdf 代码如下(示例): //pdf展示 <Document file={this.state.PDFBlob} //文件路径或者base64 ...
  • react 360中显示pdf

    2018-06-11 21:16:55
    react vr中文网:www.vr-react.com react vr qq群:481244084 示例源码 github:...因为整个react 360就是在threejs的基础之上来的,属于webvr的一种,所以可以用渲染纹理的方式展示pdf,首先可以用...
  • 插件安装 官方链接:https://github.com/wonday/react-native-pdf #安装 ...npm install react-native-pdf --save #链接依赖 react-native link rn-fetch-blob react-native link react-native-p...
  • 1.下载 npm install jspdf --save ... ...import React, {createRef} from 'react'; import JsPDF from 'jspdf'; import html2Canvas from 'html2canvas'; import dayjs from 'dayjs'; import {Butt
  • react 封装图片+pdf翻页浏览插件

    千次阅读 2018-05-13 01:28:30
    利用antd的Modal组件实现弹窗功能,控制图片pdf显隐,&lt;Modal visible={visible} onCancel={this.onCancel} onOk={this.onOk} width="1026" //style={{width:1026,height:900}} footer={...
  • 由于项目需要实现文件的预览功能,通过查询百度找到了一个组件,就是react-file-viewer,其官方API中描述可支持文件格式有以下格式: 图片:png,jpeg,gif,bmp,包括360度图片 pdf格式 CSV xslx docx 视频:mp4,...
  • React Native 把组件 转化 生成图片

    千次阅读 2018-09-05 20:40:16
    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zww1984774346/article/details/78039841 ...
  • 导入html2canvas和jspdf插件到项目中 npm install html2canvas npm install jspdf 引入html2canvas和jspdf到jsx中 import jsPDF from 'jspdf'; ... 定义一个div和需要生成pdf的页面 <div id="demo">...
  • React Native 生成图片

    千次阅读 2017-09-20 13:38:49
    方法简介:takeSnapshot方法是react-native自带的生成图片的属性,可以将”screen”, “window” 或者 “view”生成对应的图片。兼容: takeSnapshot之前的写法是在UIManager中,新版本后放到了ReactNative模块中。...
  • react中导出表格pdf文件 ```javascript import html2Canvas from 'html2canvas'; import jsPDF from 'jsPDF'; // tableShow 是讲要导出的表格展示出来(因为我的表格太长,正常是隐藏状态,导出是让表格完全显示) ...
1 2 3 4 5 ... 20
收藏数 2,814
精华内容 1,125
热门标签
关键字:

pdf转图片 react