Open a document in browser

xickomesquita · February 20, 2020, 5:43am

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,

max_morais_dmm · February 20, 2020, 5:47am

@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.

xickomesquita · February 20, 2020, 2:38pm

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

Thanks!!

max_morais_dmm · February 20, 2020, 4:50pm

@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>
            `);
        }
    }
});

xickomesquita · February 20, 2020, 5:14pm

Outstanding!!! Thanks!!

olamide_shodunke · February 20, 2020, 7:10pm

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

max_morais_dmm · February 20, 2020, 7:34pm

@olamide_shodunke

xickomesquita · February 20, 2020, 8:41pm

@olamide_shodunke

Edit the Doctype you want:

In Customization, select Custom Script:

and insert the custom Script:

It seams that the path isn’t tranlating well:

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

I’m on the path!

max_morais_dmm · February 20, 2020, 8:47pm

@xickomesquita swap that part

to

${window.location.origin }

xickomesquita · February 20, 2020, 10:08pm

Perfect. Gdocs works… Office365 doesn’t.

Thanks a lot!!

max_morais_dmm · February 21, 2020, 12:00am

@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.

xickomesquita · March 22, 2020, 5:16am

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!