I'm trying to display PDF in a filepond instance.
I'm working on Vue2 with the following dependencies
"filepond": "^4.30.4",
"filepond-plugin-pdf-preview": "^1.0.4"
In a page component I setup the filepond as follows
<setup>
...
// Import FilePond component
import vueFilePond, { setOptions } from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
import "filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.css";
// Create filepond
const FilePond = vueFilePond(FilePondPluginPdfPreview);
setOptions({
allowPdfPreview: true,
pdfComponentExtraParams: 'toolbar=0&view=fit&page=1'
});
...
</setup>
Also I want 3 PDF inlines so :
<style>
.filepond--item {width: calc(33% - 0.5em);}
</style>
Now the problem I'm having is the following with Firefox and Internet Explorer : the view=fit doesn't work.
Firefox (don't see the bottom of the PDF)
Microsoft Edge (I don't see much of the PDF)
And what I'd like is to have the exact same result as the one obtained in Chrome
Is there a workaround ? Thx
Browser views are very much down to user settings
here are Edge variables and FireFox side by side and we can see there is no one fits both, so the best solution needs detect browser and use different settings accordingly.
Chrome uses #view=FitV&page=1
Firefox uses #zoom=FitV&page=1
Note edge on the left is affected more by user settings as described in https://stackoverflow.com/a/72384838/10802527
Related
Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3
I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal
enter image description here
The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:
yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
or
npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
The Github README also describes how to use the library in a component which I've pasted below:
If using default options
<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>
OR if using custom default options
<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal';
const vScrollReveal = createScrollRevealDirective({
delay: 1000,
duration: 150,
});
</script>
How can I create a basic template for all my pages?
I try to make a RadSideDrawer on all pages available. (With exception for some specific pages like login / registration etc.).
Currently I copy and past my Menu on all pages. What is the correct way handling this?
You haven't shown any code... So not sure how are you even including it. In app-root?
But you can set menu to false to disable it on some pages:
Example:
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
let sideDrawer = Application.getRootView()
sideDrawer.getViewById('sideDrawer')
sideDrawer.gesturesEnabled = false
And enable it programmatically this way.
Nativescript Angular is well known for its code sharing properties. I am trying to simplify my design by using only 1 typescript file instead of splitting into the .ts and the .tns.ts file.
I was trying to import { Page } from "tns-core-modules/ui/page"; in the .ts. When running on Android, the code works flawlessly, but if I ng serve for the web app, it says Module not found: Error: Can't resolve 'tns-core-modules/ui/page'.
The reason why I wanted to import the page module is because of setting the action bar properties
constructor(private page: Page) {
if (isAndroid) {
console.log("This is Android");
this.page.actionBarHidden = true;
}
}
I was hoping to import the tns-core-modules/ui/page and some other tns-core-modules in the same file as the angular web app. Is it possible to do so? Or is it a must to split into the .ts and the .tns.ts files?
You have to go with platform specific ts files, one for web and one for tns, Page won't be valid while running inside a browser (ng serve).
If you prefer to reuse most of your code, try writting a common / base ts component, extend platform specific ts files from the common / base ts component, inject Page only within the tns specific ts file.
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
I'm creating a React Native module along-side a React Native application. Everything with the module works as expected until I introduce images that should exist in the package and not in the application.
Any image from the package does not display in the consuming application.
(Option 1): Including image asset
const image = require('./assets/background.jpg');
const config = {
styleConfig: {
background: {
images: {
primary: image
},
...
}
export config;
If I include config in the consuming application, everything else works as expected (strings, components, etc) until I try to include <Image source={config.styleConfig.background.images.primary} /> (normally would get this info in a nicer format but for the sake of explanation showing the full path and not any of the abstractions). This does not throw an error but displays a blank image.
(Option 2): Including image component
Once it seemed like including the asset was not working, I created an Image component that used the required image directly and exported this. This also displayed a block the size of the image but did not show the asset. If I do this same operation but create the component and load the asset from the consuming application all is well.