Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@quasar/quasar-app-extension-qpdfviewer
Advanced tools
Readme
For Qpdfviewer that works with Quasar v2/Vue v3, head to the next branch or check out the documentation.
QPdfViewer is an UI App Extension
for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.
This work is currently in beta
and there are expected changes while things get worked out. Your help with testing is greatly appreciated. Suggestions and PRs welcomed.
QPdfViewer allows you to have PDF in your web pages.
To add this App Extension to your Quasar application, run the following (in your Quasar app folder):
quasar ext add @quasar/qpdfviewer
To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):
quasar ext remove @quasar/qpdfviewer
You can use quasar describe QPdfViewer
In demo folder of app-extension-qpdfviewer.
Can be found here
Be sure to check out the Test Project for more examples.
<q-pdfviewer
v-model="show"
src="'https://www.ets.org/Media/Tests/GRE/pdf/gre_research_validity_data.pdf'"
type="pdfjs"
content-class="absolute"
/>
or
<template>
<div class="container q-pa-lg">
<q-pdfviewer
v-model="show"
:src="src"
type="html5"
content-class="fit container"
inner-content-class="fit container"
/>
</div>
</template>
<script>
export default {
name: 'Container',
props: {
src: String
},
data () {
return {
show: true
}
}
}
</script>
<style>
.container {
max-width: 50%;
max-height: 70%;
min-width: 400px;
min-height: 600px;
width: 100%;
height: 100%;
}
</style>
Using blob data (for type="html5"
only):
fetchPDF (payload) {
this.$axios.post('/my/url/to/pdf', payload, { responseType: 'blob' }).then(res => {
// create the blob
const blob = new Blob([res.data], { type: res.data.type })
// set reactive variable
pdfSrc = window.URL.createObjectURL(blob)
}).catch(err => {
this.$q.notify({
message: 'Error downloading PDF',
type: 'negative',
textColor: 'white',
color: 'negative',
icon: 'error',
closeBtn: 'close',
position: 'top'
})
})
}
NOTE:
QPdfviewer now has support for native HTML5 PDF viewer and for PDFJS. Use type="html5"
or type="pdfjs"
. If you previously has this app extension, and want to use the pdfjs, you will need to re-install it. An update will not get the PDFJS for you. If you update, you can run quasar ext invoke @quasar/qpdfviewer
instead of re-installing.
NOTE:
QPdfviewer uses the <object>
tag for displaying the PDF (type="html5"
only). Should the browser not support this, the fallback is to use an <iframe>
. And, should this also not be supported by the browser, then some text will be displayed with a link to the PDF so the user can download it for off-line viewing.
When using PDFJS, the PDF is always displayed in an <iframe>
.
NOTE:
QPdfviewer now works with Electron, but you have to use type="pdfjs"
to get this functionality.
Vue Property | Type | Description |
---|---|---|
value | Boolean | Use v-model to toggle visiblity |
src | String | Path to the PDF source |
type | String | PDF engine to use (values: html5 or pdfjs ) |
error-string | String | Set this if you wish to change from the default error string |
load | Function | The function to be called when the pdf document has been loaded |
error | Function | The function to be called when the pdf document has an error |
content-class | [String, Object, Array] | Style definitions to be attributed to the PDF container |
content-style | [String, Object, Array] | Style definitions to be attributed to the PDF container |
inner-content-class | [String, Object, Array] | Style definitions to be attributed to the PDF object |
inner-content-style | [String, Object, Array] | Style definitions to be attributed to the PDF object |
QPdfViewer has no events or slots.
If you appreciate the work that went into this App Extension, please consider donating to Quasar.
FAQs
QPdfviewer is an app extension for viewing PDF files
The npm package @quasar/quasar-app-extension-qpdfviewer receives a total of 2,218 weekly downloads. As such, @quasar/quasar-app-extension-qpdfviewer popularity was classified as popular.
We found that @quasar/quasar-app-extension-qpdfviewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.