移动端 JavaScript PDF预览

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/84941708

移动端  JavaScript PDF预览

//TabMessage.js 首页

import React from 'react';
import ReactDOM from 'react-dom';
import { ComNavBarFixed, ComButton } from '../components/ComView';
import { post, get } from '../http/Fetch';
import URL from '../http/URL';

import '../css/pdfview.scss';

class PdfView extends React.Component {

    // 构造
    constructor(props) {
        super(props);
        this.state = {
            ifSrc:'',
            isImg:false,
            isPdf:false
        }
    } 

    pdfShow(){
        //<canvas id="the-canvas"></canvas>


        // If absolute URL from the remote server is provided, configure the CORS
        // header on that server.
        // var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
        // var url = '//dev.cehse.com/static/epmapp/test.pdf';
        var url = 'https://dev.cehse.com/hse/static/pdfjs/web/viewer.html?file=..%2F..%2F..%2Ffile%2Fattachment%2Fdownload.htm%3Fpath%3D%2FEpmCompany%2F2018%2F9%2F10%2F81f331ae2c914673806a40a9ca586a74.pdf';
        // /EpmCompany/2018/9/11/d676aecb71d446e38fd4519e933bac02.pdf
        // file/attachment/download.htm?

        // var PDFData = "";
        // $.ajax({
        //     type:"get",
        //     crossDomain:true,
        //     async:false, // false是不采用异步的方式
        //     mimeType:'text/plain;charset=x-user-defined',
        //     url:"https://dev.cehse.com/hse/static/pdfjs/web/viewer.html?file=..%2F..%2F..%2Ffile%2Fattachment%2Fdownload.htm%3Fpath%3D%2FEpmCompany%2F2018%2F9%2F10%2F81f331ae2c914673806a40a9ca586a74.pdf",
        //     success:function (data) {
        //         PDFData = data; // data是byte[]数组
        //     }
    
        // });
        // var rawLength = PDFData.length;
        // // 转换成pdf.js能直接解析的Uint8Array类型，见pdf.js-4068
        // var array = new Uint8Array(new ArrayBuffer(rawLength));
        // for(var i = 0;i<rawLength;i++){
        //     array[i] = PDFData.charCodeAt(i)&0xff;
        // }
        // var url = array;



        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];

        // The workerSrc property shall be specified.
        // pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
        pdfjsLib.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

        // Asynchronous download of PDF
        var loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');
        
        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
            console.log('Page loaded');
            
            var scale = 1.5;
            var viewport = page.getViewport(scale);

            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
            canvasContext: context,
            viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function () {
            console.log('Page rendered');
            });
        });
        }, function (reason) {
        // PDF loading error
        console.error(reason);
        });
    }

    componentWillMount(){
        let viewPath = '';///EpmCompany/2018/9/11/b02b3792e4044c99a90082908212f6c9_preview.jpg
        let fileType = '';
        let id = '';
        if (!(typeof (this.props.location.params) == "undefined")) {
            viewPath = this.props.location.params.itemData.viewPath;
            fileType = this.props.location.params.itemData.fileType;
            id = this.props.location.params.itemData.id;
        }
        let ifSrc = '';

        const PICTURE_EXPRESSION = /\.(png|jpe?g|gif|svg)(\?.*)?$/
        const picReg = new RegExp (PICTURE_EXPRESSION)
        let isImg = picReg.test(viewPath);
        if(isImg){
            ifSrc = URL.baseUrl + '/file/attachment/download.htm?id='+id;
        }

        let isPdf = (new RegExp (/\.(pdf|PDF)(\?.*)?$/)).test(viewPath);
        if(isPdf){
            ifSrc = URL.baseUrl +'/static/pdfjs/web/viewer.html?file=..%2F..%2F..%2Ffile%2Fattachment%2Fdownload.htm%3Fpath%3D'+viewPath;
        }
        this.setState({ifSrc:ifSrc,isImg:isImg,isPdf:isPdf});
    }

    componentDidMount() {
        // var url = 'https://dev.cehse.com/hse/static/pdfjs/web/viewer.html?file=..%2F..%2F..%2Ffile%2Fattachment%2Fdownload.htm%3Fpath%3D%2FEpmCompany%2F2018%2F9%2F10%2F81f331ae2c914673806a40a9ca586a74.pdf';
        // this.pdfShow();
        // window.open(url);
    }


    render() {
        let that = this;
        return <div class="pdf-view-contain">
            <ComNavBarFixed value="附件预览" leftShow="" />
            {
                this.state.isImg?<div className="file-contain"><img className="file-img" src={this.state.ifSrc} alt=""/></div>:''
            }
            {
                this.state.isPdf?<iframe src={this.state.ifSrc} frameborder="0"></iframe>:''
            }
            {
                (this.state.isPdf||this.state.isImg)?'':<div className="no-contain">该文件不支持预览</div>
            }
        </div>
    }

}

export default PdfView;

    fileShow(isShow,viewPath,fileType,id,that){
        if(isShow&&viewPath){
            that.props.history.push({ pathname: '/PdfView', params: { itemData: {viewPath:viewPath,fileType:fileType,id:id}} });
        }else{
            ToastShow('不支持预览');
        }
    }

this.fileShow(item.isView,item.viewPath,item.fileType,item.id,this);

 

参考资料：

https://github.com/mozilla/pdf.js
https://blog.csdn.net/qq_25324335/article/details/78991496
https://blog.csdn.net/a1170201028/article/details/52045452
https://blog.csdn.net/aiRuan/article/details/76850696

http://mozilla.github.io/pdf.js/examples/ (官网)
https://blog.csdn.net/a973685825/article/details/81011291
https://blog.csdn.net/u014613116/article/details/79700738
https://www.jb51.net/article/141607.htm
https://www.bootcdn.cn/
https://github.com/mozilla/pdf.js
https://www.cnblogs.com/iPing9/p/7154753.html
https://www.cnblogs.com/zhanggf/p/8504317.html
 

 

移动端  JavaScript PDF预览

博客地址：https://blog.csdn.net/pcaxb/article/details/84941708