We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

PDF Viewer and Doc Editor can not load files

I am using Docker deployed PDF Viewer and Doc Editor Server, and node-filesystem as the file system provider

I can't find any errors.



Attachment: frontend_2cf0b261.zip

7 Replies

SK Sinthiya Kalimuthu Syncfusion Team November 21, 2022 10:10 AM

We regret the delay. As we are still analyzing the reported issue, we will update further details on November 23, 2022. We appreciate your patience.


Regards,

Sinthiya K



VV Visvesvar Venkatesan Syncfusion Team November 23, 2022 11:45 AM

This issue occurs generally when the document name is wrong or the document path is wrongly referred.


Kindly provide the correct document path.


Example:


<template>

  <h3>PDF Viewer</h3>

  <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :documentLoad="documentLoad"> </ejs-pdfviewer>

</template>


data() {

    return {

        serviceUrl:https://ej2services.syncfusion.com/production/web-services/api/pdfviewer,

        documentPath:'PDF_Succinctly.pdf',

    };

  },



The PDF document mentioned here must be located on the Web service sample(server side) and must be referred correctly.



AN Anji replied to Visvesvar Venkatesan November 24, 2022 06:57 PM



VV Visvesvar Venkatesan Syncfusion Team November 25, 2022 08:24 AM

We need to ensure that the loaded document is located properly in the web service application before building the Docker image.


We can load the document using the documentPath and load method.


A documentLoad is an event that triggers after the document is loaded in the PDF Viewer.


Kindly find the API for the load method - https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#load


In the load method, we can load the document dynamically and also by referring document name.


UG Documentation - https://ej2.syncfusion.com/vue/documentation/pdfviewer/how-to/load-documents/



AN Anji replied to Visvesvar Venkatesan November 25, 2022 12:31 PM

What's your means of

"We need to ensure that the loaded document is located properly in the web service application before building the Docker image"

I was using official images from https://hub.docker.com/r/syncfusion/pdfviewer-server, file system is using node file system provider from https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem

I try to switch the file system provider to google drive, but it has the same problem.

I can clearly see the files and folder in the file manager, but when I click it, it shows the error


<template>
<div>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
router
:ellipsis="false"
background-color="rgb(170,46,38)"
text-color="#fff"
active-text-color="rgb(226,181,62)"
>
<el-menu-item index="/" class="logo">
Iowa State University Dr Stone‘s Lab
<span>Online SOP Organizerspan>
el-menu-item>
<div class="flex-grow">
div>
<el-sub-menu v-if="token" index="2">
<template #title>{{ userInfo.username }}template>
<el-menu-item index="/account">Change Usernameel-menu-item>
<el-menu-item index="/account">Change Passwordel-menu-item>
<el-menu-item index="/notice">Notice el-menu-item>
<el-menu-item index="/" @click="logout">Log Outel-menu-item>
el-sub-menu>
<template v-else>
<el-menu-item index="/login" style="height: 70px">
<el-button round class="model-btn">Loginel-button>
el-menu-item>
template>
el-menu>
<router-view />
div>
<div id="container">
<ejs-tab ref="tab1" id="ej2Tab">
<div class="e-tab-header">
<div>Filesdiv>
<div>Viewdiv>
div>
<div class="e-content">
<div>
<ejs-filemanager
:fileOpen="fileOpen"
id="overview_file"
:ajaxSettings="ajaxSettings"
:view="view"
>ejs-filemanager>
div>
<div id="viewer_panel">
<div id="header">div>
<ejs-tab ref="tab2" id="ej2Tab">
<div class="e-tab-header">
<div>Docxdiv>
<div>PdfViewerdiv>
div>
<div class="e-content">
<div id="editor">
<ejs-documenteditorcontainer id="doceditcontainer" ref="doceditcontainer" :enableToolbar="true" :serviceUrl="documentEditorServiceUrl" :height="590" > ejs-documenteditorcontainer>
div>
<div id="pdfviewer">
<ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentLoad="documentLoad" > ejs-pdfviewer>
div>
div>
ejs-tab>
div>
div>
ejs-tab>
div>


template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { FileManagerComponent, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { PdfViewerComponent, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
import { DocumentEditorContainerComponent, Toolbar as DocEditToolbar } from '@syncfusion/ej2-vue-documenteditor';
import store from "@/store";
var viewer;
var hostUrl = "http://localhost:62870/";
export default {
name: "App",
components: {
"ejs-filemanager": FileManagerComponent,
'ejs-documenteditorcontainer' : DocumentEditorContainerComponent,
"ejs-pdfviewer": PdfViewerComponent
},

computed:{
userInfo(){
return JSON.parse(store.state.userInfo);
},
token(){
return store.state.token;
}
},
data() {
return {
serviceUrl:'http://localhost:6001/api/PdfViewer',
documentEditorServiceUrl:"http://localhost:6002/api/documenteditor",
// documentPath:"SOP.pdf",
ajaxSettings: {
url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations',
getImageUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveGetImage',
uploadUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveUpload',
downloadUrl: hostUrl +'api/GoogleDriveProvider/GoogleDriveDownload'
},
view: "Details",

params: {
email: "",
username: "",
password: "",
firstname: "",
lastname: "",
},
};
},
methods: {
logout(){
store.commit('removeToken')
sessionStorage.removeItem('token')
},
fileOpen: function(args) {
if (args.fileDetails.name.indexOf(".pdf") > -1 || args.fileDetails.name.indexOf(".pptx") > -1) {
// alert(args.fileDetails.name);
viewer = this.$refs.pdfviewer.ej2Instances;
this.$refs.tab1.select(1);
this.$refs.tab2.select(1);
viewer.documentPath= args.fileDetails.filterPath + args.fileDetails.name;
console.log(viewer.documentPath);
} else if (
args.fileDetails.name.indexOf(".docx") > -1 ||
args.fileDetails.name.indexOf(".doc") > -1
) {
var fileName=args.fileDetails.filterPath + args.fileDetails.name;
console.log(fileName);
var httpRequest = new XMLHttpRequest();
httpRequest.open(
"POST",
"http://localhost:6002/api/documenteditor/import?filepath="+fileName,
true
);
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200 || httpRequest.status === 304) {
this.$refs.doceditcontainer.ej2Instances.documentEditor.open(
httpRequest.responseText
);
}
}
};
httpRequest.send();
this.$refs.tab1.select(1);
this.$refs.tab2.select(0);
}
},

documentLoad: function (args) {
}
},
beforeCreate() {
// this.$store.commit('initialiseStore')

const token = this.$store.state.token;

if (token) {
axios.defaults.headers.common["Authorization"] = "Token " + token;
} else {
axios.defaults.headers.common["Authorization"] = "";
}
},
provide: {
filemanager: [DetailsView, NavigationPane, Toolbar],
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch],
DocumentEditorContainer: [DocEditToolbar]
},
mounted() {

}
}


VV Visvesvar Venkatesan Syncfusion Team November 28, 2022 09:40 AM

Syncfusion PDF Viewer is client-server-oriented. And we will process the PDF document on the server side (developed with the .NET environment) and send the processed PDF data to the client using the web service to render the PDF document and for further operations in PDF viewer.


In the sample, we have to add the document on the server side. We have attached the video of loading the sample and also we have attached the screenshot of the document located in the server sample.




Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/VUELOA~11903706360.zip



In the pdfviewercontroller.cs file


We have to refer to the path correctly in getting the document path. Kindly find the code snippet for it below.


Code snippet:


private string GetDocumentPath(string document)

        {

            string documentPath = string.Empty;

            if (!System.IO.File.Exists(document))

            {

                var path = HttpContext.Request.PhysicalApplicationPath;

                if (System.IO.File.Exists(path + "Content\\Files\\" + document))

                    documentPath = path + "Content\\Files\\" + document;

            }

            else

            {

                documentPath = document;

            }

            return documentPath;

        }


We don’t have server-side support in Node.js.


Kindly check these changes and revert to us if you have any issues.


If you have set any configurations related to “Docker”. Kindly provide us with that details.



AN Anji November 29, 2022 04:26 AM

OK, I fixed the PDF viewer but the Doc editor still not work.

This is my docker-compose.yml, I mount my document folder under the /app/Data in the docker images.

version: '3.4'

services:

word-processor-server:

image: syncfusion/word-processor-server:latest

environment:

#Provide your license key for activation

SYNCFUSION_LICENSE_KEY: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

volumes:

- /home/anji/COMS402/sop-organizer/SOP-Organizer-1/frontend/public/media/SOPs/Documents:/app/Data

ports:

- "6002:80"

Here is my code for doc editor:

} else if (
args.fileDetails.name.indexOf(".docx") > -1 ||
args.fileDetails.name.indexOf(".doc") > -1
) {
var fileName=args.fileDetails.filterPath + args.fileDetails.name;
console.log(fileName);
var httpRequest = new XMLHttpRequest();
httpRequest.open(
"POST",
"http://localhost:6002/api/documenteditor/import?filepath="+fileName,
true
);
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200 || httpRequest.status === 304) {
this.$refs.doceditcontainer.ej2Instances.documentEditor.open(
httpRequest.responseText
);
}
}
};
httpRequest.send();
this.$refs.tab1.select(1);
this.$refs.tab2.select(0);
}





Loader.
Live Chat Icon For mobile
Up arrow icon