Open a document in browser

Hi,

I’m still trying to deal with documents in my Quality Process.

I wish to open a read only file, directly on browser, without download it. If possible, it would be great if it isn’t also possible to download.

Is that viable? Do you guys have some tip?

Thanks,

1 Like

@xickomesquita

There’s few ways to do that, but none have 100% of guarantee

An simple way is over custom scripts, and HTML field with an object tag, that will try to delegate to embed one app to open certain types of docs.

If we can go baby steps, can you help me about how to open it in an android browser…

Thanks!!

@xickomesquita

I’m assuming you have an attach field in the doctype.

You should add one HTML Field, somewhere into your DocType using customize form.

And add this custom script

frappe.ui.form.on(cur_frm.doctype, {
    refresh: frm => {
        if (frm.doc.my_attach_field) {
            frm.set_df_property("my_html_field", "options", `
                <object width="400" height="400" data="${ frm.doc.my_attach_field }"></object>
            `);
        }
    }
});

Alternativelly, you can delegate the rendering to Google Docs or Microsoft Office 365

Just check the examples below

GDocs

frappe.ui.form.on(cur_frm.doctype, {
    refresh: frm => {
        if (frm.doc.my_attach_field) {
            frm.set_df_property("my_html_field", "options", `
                <iframe src="https://docs.google.com/gview?url=${ window.location.origin }/${ frm.doc.my_attach_field }&embedded=true" frameborder="0">
</iframe>
            `);
        }
    }
});

Office 365

frappe.ui.form.on(cur_frm.doctype, {
    refresh: frm => {
        if (frm.doc.my_attach_field) {
            let url = encodeURI([window.location.origin, frm.doc.my_attach_field].join("/"))
            frm.set_df_property("my_html_field", "options", `
                <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=${ url } ' width='100%' height='100%' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
            `);
        }
    }
});
4 Likes

Outstanding!!! Thanks!!

Where in the doctype do I add this ? and how?

@olamide_shodunke

@olamide_shodunke

Edit the Doctype you want:

In Customization, select Custom Script:

image

and insert the custom Script:

image

It seams that the path isn’t tranlating well:

image

the code is pointing to …/desk#Form/Quality Procedure/PRC-teste//private… instead of …/private…

I’m on the path!

@xickomesquita swap that part

to

${window.location.origin }

Perfect. Gdocs works… Office365 doesn’t.

Thanks a lot!!

@xickomesquitaI have revised both examples, and I did some changes in they, for office 365, we should pass one encoded uri, with the updated examples, it should work.

The funny thing here is I’m trying to open it in a android chrome version. So, I managed to put this script to work in my computer, but it doesn’t work at Android Chrome version.

Thanks for your usual patience and help!