使用pdf.js把PDF檔案轉圖片

阿新 • • 發佈：2018-12-26

專案需求把客戶上傳的pdf檔案轉換成圖片並執行下載，網上資料查了一下，覺得pdf.js
實現比較方便。

1.瞭解pdf.js

   PDF.js是基於開放的 HTML5 及 JavaScript 技術實現的開源產品,可以實現在html下直接瀏覽pdf文件。

2.進行核心檔案的引入

pdf.js主要包含兩個庫檔案，一個pdf.js和一個pdf.worker.js，，一個負責API解析，一個負責核心解析
<script src="pdf.js" type="text/javascript"></script>

測試程式碼：

<html>
<head 
>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display 
: block;
            background-color: rgb(0, 0, 0);
        }
        .pop{
            position: absolute;
            left: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }
    </style>
    <script src="pdf.js" type="text/javascript"></script 
>

    <script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = 'p1.pdf';
            PDFJS.workerSrc = 'pdf.worker.js';
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                pdf.getPage(1).then(function getPageHelloWorld(page) {
                    var scale = 1;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }
    </script>
</head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文件</a></h1>
<div id="container" style="display: none;">
    <div class="lightbox"></div>
    <div id="pop" class="pop">
        <canvas id="the-canvas"></canvas>
    </div>
</div>
</body>
</html>

使用pdf.js把PDF檔案轉圖片

專案需求把客戶上傳的pdf檔案轉換成圖片並執行下載，網上資料查了一下，覺得pdf.js 實現比較方便。 1.瞭解pdf.js PDF.js是基於開放的 HTML5 及 JavaScript

PDF檔案轉圖片

iamlaosong文最近要用Excel給中行做個對賬單列印工具，客戶給我的對賬單格式是一個PDF檔案，要做列印工具，需要有個圖形檔案。PDF檔案轉換成圖形方法很多，利用現有的條件才是才是硬道理。我電腦上裝的Adobe Acrobat 8 Professional倒是可以另存為圖片檔案，但

java pdf檔案轉圖片

import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; import org.apache

PDF轉換技巧之WPS轉圖片

　　經常聽到有人問WPS轉圖片怎麼轉？WPS如何轉圖片？WPS轉圖片，不管是現在的生活、工作、學習，使用一些辦公檔案都是常有的事。但檔案格式有很多，有常用的不常用，都會涉及到，遇到了就不知道怎麼辦。下面就講一下WPS轉換為圖片的操作步驟！　　WPS轉圖片準備工作　　電腦　　瀏覽器　　P

PDF.js —— vue專案中使用pdf.js顯示pdf檔案（流）

前言：專案中有一個需要預覽下載pdf的需求，網上找了很久，決定使用 pdf.js 完成。第一步：首先肯定是匯入外掛，我是從官網直接下載，連結：點選開啟連結，注意需要放在static檔案目錄下注意：這裡面有核心的pdf.js和pdf.worker.js,以及展示pdf的vi

pdf.js展示流檔案

把viewer.js中的var DEFAULT_URL刪除 viewer.html 中新增 DEFAULT_URL 把地址改成流的地址，切記viewer.js在最後 <!-- This snippet is used in production

網頁中使用pdf.js展示pdf檔案，全屏問題以及絕對路徑如何讀取

PDF展示 Web專案其中有個需求是在網頁中內嵌一個pdf展示,通過一側展示出來的檔案樹的點選事件，展示不同的pdf檔案，同時還要支援pdf的放大縮小旋轉全屏等功能。起初想了幾種方案： 1. 將pdf檔案轉換成tiff檔案（icepdf），公司有可以展示ti

工作筆記三——使用pdf.js實現pdf檔案的線上預覽

最近做移動專案（H5）時遇到一個需求，就是線上預覽pdf檔案。其實本來使用window.open()就可以實現了，但是這個API在IOS上是正常的開啟Safari瀏覽器進行預覽，在安卓上開啟是則是下載預覽，客戶不滿意；而且在將該應用嵌入到釘釘微應用時，這個API在安卓裝置上根

gulp配置自動重新整理瀏覽器壓縮js和css檔案和圖片

1.在專案目錄下新建gulpfile.js檔案,配置如下內容 var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var rename = require("gulp-rename"); var uglify =

把excel檔案轉成json格式

有的時候發來資料的檔案是excel格式的，而又需要把它們轉成json格式傳遞給服務端主要分為：1.獲取excel檔案 2.獲取檔案的工作表sheet 3.獲取指定單元格的資料（該版本屬於邏輯簡單好理解的）4.獲取的值轉成json 主要使用的jar包的座標：（我建立

把掃描檔案轉變為word文件的最實用的四款OCR識別軟體

漢王 OCR 6.0 特別版在最近幾年中，OCR識別技術隨著掃描器的普及得到了飛速的發展，掃描、識別軟體的效能不斷強大並向智慧化不斷升級發展。 OCR是英文Optical Character Recognition的縮寫，意思為光學字元識別，通稱為文字識別，它的工

js上傳檔案（圖片）限制格式及大小為3M · 觀止

如果你想快速解決這個問題，看本文就夠了。查了好多資料，終於解決了，太耗時間了，本文留給給後來者，希望你們工作的更輕鬆本文儲存為.html檔案用瀏覽器開啟即可測試功能 <form id="fo

js上傳檔案（圖片）限制格式及大小

如果你想快速解決這個問題，看本文就夠了。查了好多資料，終於解決了，太耗時間了，本文留給給後來者，希望你們工作的更輕鬆本文儲存為.html檔案用瀏覽器開啟即可測試功能 <form id="form1" name="form1" method="post" actio

c#實現ofd檔案轉圖片功能（附執行程式）

前言 ofd檔案的作用就是保證資訊能如實的儲存、傳遞、顯示。保證ofd檔案的真實性靠的是簽名；ofd 的顯示需要專用軟體。ofd標準是新的國家標準，應用範圍遠不如pdf；現有瀏覽器不能解析ofd、支援ofd顯示的軟體也寥寥無幾。ofd轉圖片程式下載。專用軟體讀取ofd過程包括對o

使用python把html網頁轉成pdf檔案

我們看到一些比較寫的比較好文章或者部落格的時候，想儲存下來到本地當一個pdf檔案，當做自己的知識儲備，以後即使這個部落格或者文章的連線不存在了，或者被刪掉，咱們自己也還有。當然咱們作為一個coder，這樣的事情肯定不能手動儲存下來然後再轉成pdf存起來對不對，有失咱們碼農的身份，當然要自動化的來實現了~

關於PDF轉圖片檔案

大家好，我是你們親愛的小六六，上篇說到會出有關PDF轉圖片檔案，現在就給大家貼出來，有需要的朋友參考。話不多說上乾貨!!! public static List<String> pdfToImagePath(String filePath){

windows下用Python把pdf檔案轉化為圖片(png格式)

最近工作中需要把pdf檔案轉化為圖片，想用python來實現，於是在網上找啊找啊找啊找，找了半天，倒是找到一些程式碼。 1、第一個找到的程式碼，我試了一下好像是反了，只能實現把圖片轉為pdf，而不能

【Python】pdf檔案逐頁轉圖片/修改圖片儲存大小指令碼

# !/usr/bin/python # -*- coding: utf-8 -*- """ author : 蛙鱖雞鸛狸猿 create_time : 2016年 11月 01日星期二 17:38:06 CST program : *_* script

怎麼把PDF檔案中的圖片全部提取出來

　　提取PDF檔案中的圖片內容看似簡單，但是如果文件特別大，而且圖片也特別多的話，想要一次性將PDF中的圖片內容提取出來恐怕就不那麼簡單了。　　通過一些pdf的網頁工具我們可以線上對PDF檔案中的圖

PDF轉換技巧之怎樣把PDF檔案轉換成圖片？

PDF如何轉換成圖片：有很多小夥伴在工作中都會遇到一些檔案轉換的問題，每次遇到這些問題都會很頭痛，不知道用什麼方法可以更快的轉換完成，尤其是遇到PDF要轉換成圖片這類的問題，這就需要一個比較專業的轉換器可以節省很多時間。那麼，如何把PDF檔案轉換成圖片？方法是什麼？推薦使用迅捷PDF轉換器，這是一款專業的

使用pdf.js把PDF檔案轉圖片

相關推薦