精华内容
下载资源
问答
  • vue轮播,展示pdf

    2019-09-29 05:24:45
    vue轮播,展示pdf 根据左侧图片格式,右侧展示相应的pdf文件与图片。(vue中不支持pdf格式,pdf文件要放在static文件里);代码如下: 1 <template> 2 <!-- 户图件展示 --> 3 <div id=...

    vue轮播,展示pdf

    根据左侧图片格式,右侧展示相应的pdf文件与图片。(vue中不支持pdf格式,pdf文件要放在static文件里);代码如下:

      1 <template>
      2   <!-- 户图件展示 -->
      3   <div id="houseImgBox">
      4     <!-- 左侧img图片 -->
      5     <div class="leftlList">
      6       <GeminiScrollbar class="my-scroll-bar">
      7         <div v-for="(item,index) in leftImgs" class="activedImg">
      8           <label>{{index+1}}</label>
      9           <div @click="clickImg(item)" :class="[leftItem == item ? 'listImgActived': 'img']">
     10             <img v-if="item.fileType =='pdf'" src="pdf.jpg" />
     11             <img v-else :src="item.fileUrl" />
     12           </div>
     13         </div>
     14       </GeminiScrollbar>
     15     </div>
     16     <!-- 分割线 -->
     17     <div class="string"></div>
     18     <!-- 中间展示的图片 -->
     19     <div class="centerImg">
     20       <img :src="fileUrl" v-show="fileType=='image'" />
     21       <iframe v-show="fileType=='pdf'" :src="fileUrl" frameborder="0" width="100%" height="100%"></iframe>
     22     </div>
     23   </div>
     24 </template>
     25 
     26 <script>
     27 export default {
     28   name: "right",
     29   components: {},
     30   beforeCreate: function() {},
     31   mounted: function() {
     32     //this.leftImgs = houseImg;
     33     if (this.leftImgs.length > 0) {
     34       this.fileUrl = this.leftImgs[0].fileUrl;
     35       this.fileType = this.leftImgs[0].fileType;
     36       this.fileName = this.leftImgs[0].fileName;
     37     }
     38   },
     39   data() {
     40     return {
     41       fileUrl: "",
     42       fileType: "image",
     43       fileName: "",
     44       leftItem: 0,
     45       leftImgs: [
     46         {
     47           fileUrl:
     48             "a.jpg",//写你自己的路径信息
     49           fileName: "房屋分户图",
     50           fileType: "image"
     51         },
     52         {
     53           fileUrl:
     54             "a.jpg",//写你自己的路径信息
     55           fileName: "房屋分户图",
     56           fileType: "image"
     57         },
     58         {
     59           fileUrl: "test1.pdf",//写你自己的路径信息
     60           fileName: "ffffff",
     61           fileType: "pdf"
     62         },
     63         {
     64           fileUrl:
     65             "b.jpg",//写你自己的路径信息
     66           fileName: "宗地图",
     67           fileType: "image"
     68         },
     69         {
     70           fileUrl:
     71             "c.jpg",//写你自己的路径信息
     72           fileName: "房屋平面图",
     73           fileType: "image"
     74         }
     75       ]
     76     };
     77   },
     78   methods: {
     79     clickImg(item) {
     80       this.leftItem = item;
     81       this.fileUrl = item.fileUrl;
     82       this.fileType = item.fileType;
     83       this.fileName = item.fileName;
     84     }
     85   }
     86 };
     87 </script>
     88 
     89 <style scoped>
     90 .leftlList {
     91   color: white;
     92   position: absolute;
     93   margin-top: 40px;
     94   margin-left: 40px;
     95   width: 190px;
     96   height: calc(100% - 80px);
     97 }
     98 
     99 .leftlList div .img,
    100 .listImgActived {
    101   display: inline-block;
    102   margin: 16px 14px;
    103   text-align: center;
    104   vertical-align: middle;
    105   width: 130px;
    106   height: 130px;
    107   line-height: 130px;
    108   border: 2px solid gray;
    109 }
    110 .leftlList div .img > img,.listImgActived img{
    111   width: 100%;
    112   height: 100%;
    113 }
    114 
    115 #app .string {
    116   position: absolute;
    117   margin-left: 220px;
    118   margin-top: 40px;
    119   height: calc(100% - 80px);
    120   border: 2px solid gray;
    121   display: inline-block;
    122 }
    123 
    124 .centerImg {
    125   position: absolute;
    126   width: calc(100% - 430px);
    127   margin-left: 300px;
    128   margin-top: 70px;
    129   text-align: center;
    130   vertical-align: middle;
    131   height: calc(100% - 20%);
    132 }
    133 .centerImg img {
    134   width: 100%;
    135   height: 100%;
    136 }
    137 
    138 .listImgActived {
    139   border: 2px solid aqua !important;
    140 }
    141 
    142 .my-scroll-bar {
    143   height: 100%;
    144 }
    145 </style>

    如有疑惑,请加群讨论。

     

    转载于:https://www.cnblogs.com/yaosusu/p/11586817.html

    展开全文
  • div class="commit-img" id="commit_img" @click="previewImage(base64Img)"> <canvas id="canvas-pdf" style="width: 100%;"></canvas> </div> <!-- 图片预览(vant预览图

    base64在线展示pdf,pdf放大预览预览效果

    下载插件pdfjs-dist

    // 下载插件pdfjs-dist
    yarn add pdfjs-dist
    
    

    页面使用

    
    <div class="commit-img" id="commit_img" @click="previewImage(base64Img)">
      <canvas id="canvas-pdf" style="width: 100%;"></canvas>
    </div>
    
    <!-- pdf转为图片后支持放大预览(vant预览图片的组件) -->
    <van-image-preview v-model="previewShow" v-if="previewShow">
    </van-image-preview>
    
    import PDFJS from 'pdfjs-dist'
    
    methods: {
        /**
         * @description: 渲染pdf文件
         * @param {pdfUrl} base64文件流
         * @return: 
         * @author: hch
         */
        renderPdfEvn (pdfUrl) {
          // 当 PDF 地址为跨域时,pdf 应该以流的形式传输,否则会出现pdf损坏无法展示
          PDFJS.getDocument(pdfUrl).then(pdf => {
            // 得到PDF的总的页数
            let totalPage = pdf.numPages
            // 根据总的页数创建相同数量的canvas
            for (let i = 1; i <= totalPage; i++) {
              pdf.getPage(i).then((page) => {
                let viewport = page.getViewport(1)
                let canvas = document.getElementById('canvas-pdf')
                let context = canvas.getContext('2d')
                canvas.height = viewport.height
                canvas.width = viewport.width
                let renderContext = {
                  canvasContext: context,
                  viewport
                }
                // 如果你只是展示pdf而不需要复制pdf内容功能,则可以这样写render // page.render(renderContext) 
                page.render(renderContext)
              })
            }
          })
        },
        /**
         * @description: canvas转为base64 图片
         * @param {type} 
         * @return: 
         * @author: hch
         */
        canvasToImageEvn () {
          // canvas转为base64 图片
          let previewImg = new Image()
          this.previewCanvas = document.querySelector('#canvas-pdf')
          this.previewContext = this.previewCanvas.getContext('2d')
          this.previewContext.drawImage(previewImg, 0, 0)
          previewImg.src = this.previewCanvas.toDataURL('image/png')
          this.previewImgBsae64 = previewImg.src.split(',')[1]
          return previewImg.src
        }
      }
    
    展开全文
  • 问题:引入PDF.JS加载流预览PDF附件,结果页面数据无法展示(图一),其余都可用;并且预览模式可以显示(图二),请问这是什么问题啊?怎么解决? 谢谢~~~ PDF.JS版本(1.9.426) 页面HTML ``` ; charset=...
  • 两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 代码如下:<frame src=”pdf文件的地址”></frame>另一种:使用js插件哈。其中实现阅读pdf文件的js插件很多,比如:pdf.js:是...
  • 目前试过用截图方式来获取网页,然后转化成pdf的方式来获取信息,但是碰到了文本域中文字多了就显示不全了。 ![图片说明](https://img-ask.csdn.net/upload/201904/11/1554971170_898658.png)
  • 起因 ...展示没问题 pdf : 本来上面两步使用 <img />可以解决了,但是 pdf 不能够使用呀,在网上查找了资料,最后打算将 pdf 转换成 canvas ,使用的是 pdf,js 开始 先看看最终完成效果 ...

    起因

    项目中需要前端来解析.zip\ .image\ .pdf 预览图像,并且需要在图形上绘制。所以我的整体解决方法是,在解析生成的图形的基础上,覆盖一层 Canvas。

    • zip 使用了 jszip 直接将其中的图片取出来
    • image 可以直接使用 <img />展示没问题
    • pdf : 本来上面两步使用 <img />可以解决了,但是 pdf 不能够使用呀,在网上查找了资料,最后打算将 pdf 转换成 canvas ,使用的是 pdf,js

    由于网上 关于 pdf,js 的资料都比较不统一,各种 API 都是比较老旧的,所以本次记录一下,希望帮助到后来的人能够快速完成一个 预览 pdf 的 Demo。

    开始

    先看看最终完成效果
    在这里插入图片描述
    安装 pdfjs-dist

    npm i pdfjs-dist
    

    这里直接附上代码

    <template>
      <div class="file-container">
        <div class="file-upload">
          <h3>PDF 转 Canvas</h3>
          <el-upload class="file2img-upload"
            drag
            action=""
            :on-change="handleChange"
            accept=".pdf"
            :http-request="httpRequest"
            :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <div class="el-upload__tip"
              slot="tip">支持 PDF</div>
          </el-upload>
        </div>
    
        <div class="img-container"
          v-show="file">
          <div>
            <div class="theCanvas">
              <canvas id="theCanvas"></canvas>
            </div>
            <el-pagination layout="prev, pager, next"
              :current-page.sync="currentPage"
              :page-size="1"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    const pdfjsLib = require('pdfjs-dist')
    // Setting worker path to worker bundle.
    window.pdfjsWorker = require('pdfjs-dist/build/pdf.worker')
    export default {
      data () {
        return {
          currentPage: 1,
          total: 0,
          pageRendering: false,
          file: null
        }
      },
      watch: {
        currentPage () {
          // 渲染完才允许切换页码
          if (!this.pageRendering) {
            this.loadPdf(this.file)
          }
        }
      },
      mounted () {
    
      },
      methods: {
        handleChange (files, fileList) {
          if (fileList.length > 1) {
            fileList.splice(0, 1)
          }
        },
        httpRequest (file) { },
    
        beforeUpload (file) {
          this.currentPage = 1 // 初始化
    
          const blob = new Blob([file])
          const reader = new FileReader()
          const that = this
          reader.onload = function () {
            that.file = this.result
            that.loadPdf(this.result)
          }
          reader.readAsArrayBuffer(blob)
        },
    
        async loadPdf (result) {
          const currentPage = this.currentPage
          const loadingTask = pdfjsLib.getDocument(result)
          const pdfDocument = await loadingTask.promise
    
          this.total = pdfDocument.numPages
    
          if (!pdfDocument) console.error('Error: ' + pdfDocument)
          // Request a first page
          this.pageRendering = true
          const pdfPage = await pdfDocument.getPage(currentPage)
          // Display page on the existing canvas with 100% scale.
          const viewport = pdfPage.getViewport({ scale: 1.0 - 0.2 })
          const canvas = document.getElementById('theCanvas')
          canvas.width = viewport.width
          canvas.height = viewport.height
          const ctx = canvas.getContext('2d')
          const renderTask = pdfPage.render({
            canvasContext: ctx,
            viewport: viewport
          })
    
          // Wait for rendering to finish
          await renderTask.promise
    
          this.pageRendering = false
        }
    
      }
    }
    </script>
    
    <style lang="less" scoped>
    .file-container {
      overflow: auto;
      display: flex;
    
      .img-container {
        flex: 1;
        display: flex;
        > div {
          margin: 0 auto;
          .theCanvas {
            display: inline-block;
            border: 1px solid #ccc;
          }
        }
      }
    }
    </style>
    
    

    最后

    附上

    展开全文
  • 第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的 ...第二步:html代码添加两行代码,一个是canvas用来绘图,一个是img用来最后展示转换后的pdf图片 <body> <img :src="im..

    第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的

    <script src="pdfjs/build/pdf.js"></script>
    <script src="pdfjs/build/pdf.worker.js"></script>

     

     

    第二步:html代码添加两行代码,一个是canvas用来绘图,一个是img用来最后展示转换后的pdf图片

    <body>
        <img :src="imgUrl" alt="" width="100%" height="auto">
        <canvas id="the-canvas" style="display: none"></canvas>
    </body>

     

    第三步:js代码块,主要是将paf通过pdfjs插件绘制到canvas,然后再转换为base64格式的图片

    //url参数是pdf地址,imgUrl是最后的base64格式图片
    showPdf(url) {
        let _this = this;
        let imgArr = [];
        pdfjsLib.workerSrc = 'pdf.worker.js';
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) {
            console.log('PDF loaded');
            let pageNum = pdf.numPages;
            // console.log(pageNum);
            for (let i=1; i<=pageNum; i++) {
                pdf.getPage(i).then(function(page) {
                    console.log('Page loaded');
     
                    let scale = 1;
                    let viewport = page.getViewport(scale);
     
                    // let canvas = document.getElementById('the-canvas');
                    let canvas = document.createElement("canvas");
                    let context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
     
                    let renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    let renderTask = page.render(renderContext);
                    renderTask.then(function () {
                        console.log('Page rendered');
                        let imgUrl = canvas.toDataURL('image/jpeg'); //转换为base64
                        if (imgUrl) {
                            imgArr[i-1] = imgUrl;
                        }
                        //pdf全部画完结束后操作
                        if (imgArr.length==pageNum&&!isEmpty(imgArr)) {
                            // let canvas2 = document.createElement("canvas");
                            let canvas2 = document.getElementById('the-canvas');
                            let context2 = canvas2.getContext('2d');
                            canvas2.height = viewport.height*pageNum;
                            canvas2.width = viewport.width;
                            let count = 0;
                            for (let j=0; j<imgArr.length; j++) {
                                let IMG = new Image();
                                IMG.src=imgArr[j];
                                IMG.width = viewport.width;
                                IMG.height = viewport.height;
                                IMG.onload = function () {
                                    context2.drawImage(IMG,0,viewport.height*j);
                                    count++;//确保所有img渲染结束后操作
                                    if (count==pageNum) {
                                        let canvas = document.getElementById('the-canvas');
                                        //赋值给img
                                        _this.imgUrl = canvas.toDataURL('image/jpeg');
                                    }
                                }
                            }
                        }
                    });
                });
            }
        }, function (reason) {
            console.error(reason);
        });
     
        function isEmpty(arr) {
            for(let i=0;i<arr.length;i++) {
                if(!arr[i])
                    return true;
            }
            return false;
        }
    }

     

    展开全文
  • 网页中预览PDF文件

    千次阅读 2013-11-30 12:16:59
    两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 另一种:使用js插件哈。 其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档...
  • 做个小例子代码如下,在线展示链接demo1 <html> <head> <title>html2canvas example</title> <style type="text/css">...</style> </head> <body> <...
  • 今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe...
  • 项目前端框架 vue 使用vue-pdf 展示pdf 出现一下情况 <p><img alt="" height="658" src="https://img-ask.csdnimg.cn/upload/1608107985355.png" width="1106" /></p> 然后导致 浏览器别的页面也缺文字 甚至...
  • vue中如何实现pdf文件预览?

    千次阅读 2018-07-13 14:38:00
    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe...
  • 网页中浏览pdf文件—小插件

    万次阅读 热门讨论 2013-11-30 10:44:30
    两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 另一种:使用js插件哈。 其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需...
  • 前台是将页面展示的数据图标什么的生成PDF 前台代码: function downloadofpdf(){ var varname = $("#taskid").text(); if(confirm("您确认下载该PDF文件吗?")){ var target = document....
  • 前端PDF文件转图片方法(你值得收藏)

    千次阅读 热门讨论 2020-11-03 17:20:46
    前端PDF文件转图片方法(你值得收藏) 第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是...第二步:html代码添加两行代码,一个是canvas用来绘图,一个是img用来最后展示转换后的pdf图片 <body>
  • 其中有一个页面除了header部分之外还有一个部分就是pdf文件的展示,如下图所示。 已经实现了隐藏工具栏,背景灰色取消,目前就差页面的pdd显示区域正好适应iframe的大小(正好铺满)...
  • 系统需要将PDF文件由后台直接转为img图片,供前端页面直接展示,不需要用户下载即可预览文件内容。直接转换时如果文件过大,耗时很长,影响用户体验,后调研后使用多线程方式进行,显著加快图片转换速度。 1、创建...
  • 需要展示PDF文件,就使用了pdfviewer控件,因为控件的‘附件’栏 有些占用空间,那个地方怎么隐藏?   求 大神 帮助   <p><img alt="" height="404" src=...
  • 在使用pdf.js页面展示PDF文件的过程中,多数...[图片说明](https://img-ask.csdn.net/upload/201904/12/1555051060_87186.png),我在pdf.worker.js中增加UniGB-UCS2-H仍无法展示该文字,请诸位大牛答疑解惑,非常感谢!
  • 由于当前项目要求兼容ie8,且系统内部会将pdf转为图片,并使用html原生img标签展示。除了ie8其他浏览器都能正常展示,但是ie8有时可以显示,有时却只显示叉号,图片大小都能加载但是内容不能正常显示。 解决: 排查...
  • 前言 爱因斯坦说过“耐心和恒心总会得到报酬的”,我也一直把这句话当做自己的座右铭,这句箴言在今年也彻底在“我”...[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8njFsiCF-16212508438
  • 这是一个模型,展示了现代Web浏览器如何将HTML字符串呈现为图像。 如何开始:warning:由于低级图像渲染库的某些限制,本教程需要节点10.x。...:China:如果您无法访问Google文档,也可以检查此PDF版本。 滑梯
  • Markdown入门笔记

    2021-03-28 09:48:29
    可以导出为HTML、Word、IMGPDF、Epub等格式文档 后缀为.md .markdown 编辑器:Typroa 支持MacOS、Windows、Linux平台 包含多种主题 编辑后直接渲染出效果 参考书籍:《了不起的Markdown》 Markdown标题 使用 ...
  • 文件转化与预览

    2019-07-05 18:30:33
    图片和pdf还好,流方式浏览器能直接展示,但是pdf、xls、doc则需要转化为html,然后再读取html。 浏览器文件打开的两种方式 1流方式:针对pdf、图片等间接支持的文件 说明如果用流读取的方式读取html,那么其中的...
  • [IE中展示EXCEL](https://img-ask.csdn.net/upload/201703/31/1490944326_805248.png) 但是每次都会有弹出框,![提示](https://img-ask.csdn.net/upload/201703/31/1490944268_656491.png) 而如何才能默认打开,不...
  • 结果展示5.全部代码总结 前言 首先介绍一下需求,我是突然接到的财务部门的需求,需要自动合成电子发票,利用两个pdf,一个是固定的发票模板,一个是财务平台导出的发票内容文件,合成最终的电子发票。 ![电子...
  • 大体思想:flask接收到前端传来的图片(不仅仅是图片,还可以是视频,pdf等),然后生成唯一标识存入后端(static/file下),再配置成对应外网访问的连接,返回对应链接,前端接收,然后通过img,vedio标签展示 ...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

imgpdf展示