我对查看器v7有一些问题,在API参考教程中找不到任何答案。
我想做的:我想使用Forge Datamanagment API将PDF上传到Forge,然后通过Viewer打开它
到目前为止,我已经设法做到了:我设法上传PDF文件来伪造并将其翻译成SVF。
然而,到目前为止,当我想使用查看器打开PDF时,我只得到一个空白页。我已经学习了本教程,并且还添加了扩展名Autodesk。PDF
。这就是我的代码的样子:
Autodesk.Viewing.Initializer(options, () => {
this.viewer = new Autodesk.Viewing.GuiViewer3D(this.viewerDiv);
this.viewer.loadExtension("Autodesk.PDF").then(() => {
const startedCode = this.viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
Autodesk.Viewing.Document.load(urn, (doc) => this.onDocumentLoadSuccess(doc), (err) => this.onDocumentLoadFailure(err));
});
});
onDocumentLoadSuccess(doc) {
var defaultModel = doc.getRoot().getDefaultGeometry();
this.viewer.loadDocumentNode(doc, defaultModel);
}
onDocumentLoadFailure(viewerErrorCode) {
this.handleError('Error loading document', viewerErrorCode);
}
对于IFC文件,这可以正常工作,但对于PDF文件则不行。
我看过一些教程使用loadModel
函数打开PDF文件,该函数将URL作为输入,甚至不翻译它们。
下面是我的问题:
loadModel
函数也与URN(所以Base64 endcoded对象ID)?提前谢谢
问题1:我甚至需要翻译我的PDF文件才能在查看器中打开它吗?
A1:是的!根据Forge Viewer的使用条款,Autodesk Forge Viewer只能用于查看由Autodesk Forge services生成的文件
/*!
* LMV v7.6.1
*
* Copyright 2019 Autodesk, Inc.
* All rights reserved.
*
* This computer source code and related instructions and comments are the
* unpublished confidential and proprietary information of Autodesk, Inc.
* and are protected under Federal copyright and state trade secret law.
* They may not be disclosed to, copied or used by any third party without
* the prior written consent of Autodesk, Inc.
*
* Autodesk Forge Viewer Usage Limitations:
*
* The Autodesk Forge viewer can only be used to view files generated by
* Autodesk Forge services. The Autodesk Forge Viewer JavaScript must be
* delivered from an Autodesk hosted URL.
*/
Q2:为什么查看器适用于IFC文件,但不适用于PDF文件,尽管翻译成SVF成功?
A2:请提供来自GET:urn/manifest的错误消息
Q3:我可以使用的loadModel函数也与URN(所以Base64 endcoded对象ID)?
是的,如果我理解正确的话。以下是代码片段和屏幕广播:https://knowledge.autodesk.com/community/screencast/de6b2d2a-c6b3-4747-8664-bd79cf417765
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<!-- The Viewer CSS -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.6.*/style.min.css" type="text/css">
<style>
* {
margin: 0;
padding: 0;
}
/* Create two unequal columns that floats next to each other */
.column {
float: left;
height: 100vh;
}
.left {
width: 10%;
}
.right {
width: 90%;
}
/* Clear floats after the columns */
.row:after {
content: "";
position: relative;
display: inline-block;
clear: both;
}
#pdf-pages-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
}
#pdf-pages-wrapper ul {
padding-left: 20px;
}
#pdf-pages-wrapper a {
color: black;
text-decoration: none;
}
#pdf-pages-wrapper a.active {
font-weight: bold;
color: blue;
text-decoration: underline;
}
#viewer {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="column left">
<div id="pdf-pages-wrapper"></div>
</div>
<div class="column right">
<div id="viewer"></div>
</div>
</div>
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.6.*/viewer3D.js"></script>
<!-- Developer JS -->
<script>
class PdfData {
constructor( document ) {
this.doc = document;
this.pages = [];
}
parse() {
const filter = {
type:'geometry',
role: '2d'
};
const doc = this.doc;
const rootItem = doc.getRoot();
const viewables = rootItem.search( filter );
if( viewables.length === 0 ) {
console.error( 'Document contains no viewables.' );
return false;
}
const pages = viewables.map( v => {
const files = v.search( { role: 'pdf-page' } );
const file = files[0];
if( !file ) return;
const urn = file.data.urn;
return {
guid: v.guid(),
raw: v,
name: v.name(),
urn,
url: function() {
return Autodesk.Viewing.endpoint.getItemApi() + urn;
}
};
});
this.pages = pages;
if( !pages || pages.length <= 0 )
return false;
return true;
}
}
let viewer;
const options = {
env: 'AutodeskProduction',
accessToken: 'YourAccessToken'
};
const documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvRTE1MDEyX1RVRl9aMzkwTS1QUk9fR0FNSU5HX1dpLUZpX1VNX1YyX1dFQi5wZGY';
Autodesk.Viewing.Initializer(options, function() {
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
function onDocumentLoadSuccess( doc ) {
buildPdfPageList( doc );
const container = document.getElementById( 'viewer' );
viewer = new Autodesk.Viewing.GuiViewer3D( container );
viewer.start();
viewer.loadExtension( 'Autodesk.PDF' ).then( () => {
const event = new Event( 'click' );
const page = document.querySelector( '#pdf-pages-wrapper a' );
page.dispatchEvent( event );
});
}
function onDocumentLoadFailure(viewerErrorCode) {
console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}
function onLoadModelSuccess(model) {
console.log( 'onLoadModelSuccess()!' );
console.log( 'Validate model loaded: ' + ( viewer.model === model ) );
console.log( model );
}
function onLoadModelError( viewerErrorCode ) {
console.error( 'onLoadModelError() - errorCode:' + viewerErrorCode);
}
function buildPdfPageList( doc ) {
const pdf = new PdfData( doc );
pdf.parse();
const pageWrapperContainer = document.getElementById( 'pdf-pages-wrapper' );
const pagesContainer = document.createElement( 'ul' );
pageWrapperContainer.appendChild( pagesContainer );
for( let i=0; i < pdf.pages.length; i++ ){
const page = pdf.pages[i];
console.log( page );
const pageHolder = document.createElement( 'li' );
pagesContainer.appendChild( pageHolder );
const pageItem = document.createElement( 'a' );
pageHolder.appendChild( pageItem );
pageItem.href = '#';
pageItem.innerText = page.name;
pageItem.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.stopPropagation();
document.querySelectorAll( '#pdf-pages-wrapper a' ).forEach( e => e.classList.remove( 'active' ) );
e.target.classList.add( 'active' );
viewer.tearDown();
const url = page.url();
console.log( page, url );
viewer.loadModel( url, {page: 1}, onLoadModelSuccess, onLoadModelError );
});
}
}
</script>
</body>
</html>