转载请注明预见才能遇见的博客: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预览